reactjs - 如何将选择的 defaultValue 限制为 TypeScript 中选项的值之一

Question

我怎么输入 Select的 Prop 让defaultValue被限制为 options 之一值(在本例中为 "au" | "nz")？

const countryOptions = [
  {
    value: "au",
    label: "Australia",
  },
  {
    value: "nz",
    label: "New Zealand",
  }
] as const;

// This should produce an error because "foo" is neither "au" or "nz"
<Select options={countryOptions} defaultValue="foo" ... />

Answer 1

您可以使用泛型来捕获 options 的类型props 并且您可以使用索引访问类型来获取 value 的实际类型

function Select<T extends { readonly value: string, readonly label: string }>(p: { options: readonly T[], defaultValue: T['value'] }) {
    return <div />
}

Playground Link
您也可以仅对 value 使用泛型。 field 。 (您需要在 & {} 上使用 defaultValue 来降低该推理站点的优先级。

function Select<T extends string>(p: { options: ReadonlyArray<{ value: T, label: string }>, defaultValue: T & {} }) {
    return <div />
}

Playground Link