如何在通用反应挂钩中使用打字稿获取对象的值

Question

我正在创建一个简单的挂钩，通过提供 items、labelKey 和 valueKey 来检索选项对象。

这是我的钩子参数界面：

interface IProps<T> {
  items: T[];
  labelKey: keyof T;
  valueKey: keyof T;
}

这是钩子本身：

const useOptions = <T extends object>(props: IProps<T>) => {
  const { items, labelKey, valueKey } = props;

  const options = useMemo<SelectOption[]>(() => {
    return items.map((item) => ({
      label: item[labelKey],
      value: item[valueKey],
    }));
  }, [items]);
  return options;
};

export default useOptions;

最后这是SelectOption，我打算得到一个这种类型的数组。

export interface SelectOption {
  value: number | string;
  label: number | string;
}

我是如此接近，但我找不到我在这里失踪的东西。这是我看到的打字稿错误：

Type 'T[string]' is not assignable to type 'string | number'.

Answer 1

现在T 可以有任何形状。您仅将 T 约束为 object 类型。但是您正试图将T 中的值分配给SelectOption 的属性。 SelectOption 的两个属性只接受 string 或 number 作为它们的值来解释错误。

我们可以限制T 也只有number | string 属性。

const useOptions = <
  T extends Record<string, string | number>
>(props: IProps<T>) => {
   /* ... */
};

---

Playground