索引签名参数类型不能是联合类型。请考虑改用映射对象类型

Question

我正在尝试使用以下模式：

enum Option {
  ONE = 'one',
  TWO = 'two',
  THREE = 'three'
}

interface OptionRequirement {
  someBool: boolean;
  someString: string;
}

interface OptionRequirements {
  [key: Option]: OptionRequirement;
}

这对我来说似乎很简单，但是我收到以下错误：

索引签名参数类型不能是联合类型。请考虑改用映射的对象类型。

我做错了什么？

Answer 1

在我的情况下：

export type PossibleKeysType =
  | 'userAgreement'
  | 'privacy'
  | 'people';

interface ProviderProps {
  children: React.ReactNode;
  items: {
    //   ↙ this colon was issue
    [key: PossibleKeysType]: Array<SectionItemsType>;
  };
}

我通过使用运算符而不是使用：

~~~

interface ProviderProps {
  children: React.ReactNode;
  items: {
    //     ↙ use "in" operator
    [key in PossibleKeysType]: Array<SectionItemsType>;
  };
}

Answer 2

最简单的解决方案是使用记录

type OptionRequirements = Record<Options, OptionRequirement>

您也可以自己实现它：

type OptionRequirements = {
  [key in Options]: OptionRequirement;
}

此构造仅适用于类型，但不适用于接口。

定义中的问题是说接口的键应该是选项类型，其中选项是枚举，而不是字符串、数字或符号。

选项中的键表示“对于联合类型选项中的特定键”。

< code>type alias比< code>interface更加灵活和强大。

如果您的类型不需要在类中使用，请选择接口上的类型。

Answer 3

您可以使用TS“in”运算符并执行以下操作：

enum Options {
  ONE = 'one',
  TWO = 'two',
  THREE = 'three',
}
interface OptionRequirement {
  someBool: boolean;
  someString: string;
}
type OptionRequirements = {
  [key in Options]: OptionRequirement; // Note that "key in".
}