reactjs - 如何使用 TypeScript 键入自定义 React 选择组件？

Question

我想要一个 CustomSelect React 组件适用于任何预定义的集合 options并在使用未知选项时让 TypeScript 警告用户。
这是我的尝试:

type Props<Value> = {
  value: Value;
  onChange: (newValue: Value) => void;
  options: readonly string[];
};

function CustomSelect<Value>({
  value,
  onChange,
  options
}: Props<Value>) {
  return (
    <select
      value={value /* See Issue 1 below */}
      onChange={(e) => {
        onChange(e.target.value); // See Issue 2 below
      }}
    >
      {options.map((value) => (
        <option value={value} key={value}>
          {value}
        </option>
      ))}
    </select>
  );
}

用法:

const FRUITS = ["apple", "banana", "melon"] as const;

type Fruit = typeof FRUITS[number];


<CustomSelect<Fruit>    {/* See Bonus question below */}
  value={state.fruit}
  onChange={(newFruit) => { ... }}
  options={FRUITS}
/>

这有两个 TypeScript 问题:
第 1 期

Type 'Value' is not assignable to type 'string | number | readonly string[] | undefined'.

第二期

Argument of type 'string' is not assignable to parameter of type 'Value'.

奖金问题
绝对有必要通过 <Value>到 CustomSelect ，或者可以 CustomSelect以某种方式扣除这个 Value来自提供的 options ?
CodeSandbox Playground

Answer 1

值(value)可以是任何东西<Value>是一个没有限制的泛型类型参数。但是您将其作为 value 传递支持 HTMLOptionElement .这个 Prop 确实有限制。肯定是:

string | number | readonly string[] | undefined

所以你有几个选择:

您可以限制 Value 的可接受类型使用 extends关键字，以便只允许有效的选项值类型

<Value extends string | number | readonly string[] | undefined>
<Value extends string | number>
<Value extends JSX.IntrinsicElements['option']['value']>
<Value extends NonNullable<JSX.IntrinsicElements['option']['value']>>

您可以要求，如果 Value类型不可分配给 <option>那么你必须有一个额外的 Prop 来映射 Value你可以处理的事情。从技术上讲，我们可以使用数组索引作为 value但我们真正需要的是label .

您可以要求 options prop 是具有 label 的对象数组和 value .这是第三方库中的常用方法。两者 label和 value应该是 string | number但是我们可以接受选项对象上的任何其他属性，例如 data .

映射值
这是上面#2 的示例方法。
我从@oieduardorabelo 的回答中窃取使用 e.target.selectedIndex获取选项的索引为 e.target.value将永远是 string .
成分

type Allowed = string | number;

type BaseProps<Value> = {
  value: Value;
  onChange: (newValue: Value) => void;
  options: readonly Value[];
  mapOptionToLabel?: (option: Value) => Allowed;
  mapOptionToValue?: (option: Value) => Allowed;
};

// mappers required only in certain cirumstances
// we could get fancier here and also not require if `Value` has `value`/`label` properties
type Props<Value> = Value extends Allowed
  ? BaseProps<Value>
  : Required<BaseProps<Value>>;


// type guard function checks value and refines type
const isAllowed = (v: any): v is Allowed =>
  typeof v === "string" || typeof v === "number";

function CustomSelect<Value>({
  value,
  onChange,
  options,
  mapOptionToLabel,
  mapOptionToValue
}: Props<Value>) {
  const toLabel = (option: Value): Allowed => {
    if (mapOptionToLabel) {
      return mapOptionToLabel(option);
    }
    // if our props are provided correctly, this should never be false
    return isAllowed(option) ? option : String(option);
  };

  const toValue = (option: Value): Allowed => {
    if (mapOptionToValue) {
      return mapOptionToValue(option);
    }
    return isAllowed(option) ? option : String(option);
  };

  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    onChange(options[e.target.selectedIndex]);
  };

  return (
    <select value={toValue(value)} onChange={handleChange}>
      {options.map((value) => (
        <option value={toValue(value)} key={toValue(value)}>
          {toLabel(value)}
        </option>
      ))}
    </select>
  );
}

用法

const FRUITS = ["apple", "banana", "melon"] as const;

type Fruit = typeof FRUITS[number];

const SelectFruit = () => {
  const [selected, setSelected] = React.useState<Fruit>(FRUITS[0]);

  return (
    <div>
      <div>Value: {selected}</div>

      <CustomSelect value={selected} onChange={setSelected} options={FRUITS} />
    </div>
  );
};

const SelectNumber = () => {
  const [n, setN] = React.useState(0);
  return (
    <div>
      <div>Value: {n}</div>

      <CustomSelect value={n} onChange={setN} options={[0, 1, 2, 3, 5]} />
    </div>
  );
};

interface User {
  name: string;
  id: number;
}

const SelectUser = () => {
  const users: User[] = [
    {
      id: 1,
      name: "John"
    },
    {
      id: 322,
      name: "Susan"
    },
    {
      id: 57,
      name: "Bill"
    }
  ];

  const [user, setUser] = React.useState(users[0]);

  return (
    <div>
      <div>Value: {JSON.stringify(user)}</div>

      <CustomSelect
        value={user}
        onChange={setUser}
        options={users}
        // has an error if no mapOptionToLabel is provided!
        // I don't know why the type for user isn't automatic
        mapOptionToLabel={(user: User) => user.name}
        mapOptionToValue={(user: User) => user.id}
      />
    </div>
  );
};

Code Sandbox Link