尝试映射 Enum 键以生成 JSX 元素时出现打字稿错误

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} />)

我收到错误：

类型为 '(enumKey: "ACH" | "Wire" | "Check" | "Credit") => JSX.Element' 的参数不可分配给类型为 '(value: string, index: number, array: string[ ]) => 元素'。参数“enumKey”和“value”的类型不兼容。类型“string”不可分配给类型“ACH”| “电线”| “检查”| “信用”'。

有任何想法吗？

Answer 1

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

相反，我们需要说数组本身是enum.

(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.enumKeywhich 来查找文字键，'enumKey'而不是depositTypes[enumKey]使用which 来查找当前变量的键。你要这个：

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