javascript - 尝试映射 Enum 键以生成 JSX 元素时出现 Typescript 错误

Question

对于我的生活，我无法弄清楚这一点。

我有一个简单的枚举，在这里:

export enum depositTypes {
  ACH = 42,
  Wire = 36,
  Check = 3,
  Credit = 2,
}

我想映射到选择的选项标签，即:

Object.keys(depositTypes).map((enumKey: keyof typeof depositTypes) => <option key={depositTypes.enumKey} label={enumKey} value={depositTypes.enumKey} />)

我得到一个错误:

Argument of type '(enumKey: "ACH" | "Wire" | "Check" | "Credit") => JSX.Element' is not assignable to parameter of type '(value: string, index: number, array: string[]) => Element'. Types of parameters 'enumKey' and 'value' are incompatible. Type 'string' is not assignable to type '"ACH" | "Wire" | "Check" | "Credit"'.

有什么想法吗？

Answer 1

您在错误的地方应用了您的断言。 Object.keys(depositTypes) 是一个 string 数组，所以它的 .map 回调需要是一个可以接受任何 string 的函数。现在你有一个只能接受你的enum键的映射器，所以它不能用来映射string[]。

相反，我们需要说数组本身是枚举的键数组。

(Object.keys(depositTypes) as (keyof typeof depositTypes)[]).map( ... )

如果您发现自己经常这样做，您可能希望将其提取到一个函数中:

const typedKeys = <T extends {}>(object: T): (keyof T)[] => {
  return Object.keys(object) as (keyof T)[];
}

typedKeys(depositTypes).map( ... )

由于之前的错误，您之前没有发现代码中的错误。您正在使用 depositTypes.enumKey 寻找文字键 'enumKey' 而不是 depositTypes[enumKey] 寻找这个键当前变量。你想要这个:

(Object.keys(depositTypes) as (keyof typeof depositTypes)[]).map(
  enumKey => <option key={depositTypes[enumKey]} label={enumKey} value={depositTypes[enumKey]} />
)