我怎样才能正确地输入这个？

Question

我有这个 React 组件：

const Icon = ({ icon, ...props }: { icon: keyof IconType }) => {
  const Icon = Icons[icon]
  return <Icon {...props} />
}

我正试图以这种方式使用它：

<Icon icon={ordinaryString} />

我怎样才能避免收到此打字稿错误：

The type "string" cannot be assigned to the type "keyof IconType".

Answer 1

我将假设 ordinaryString 是类型 string，因为这是错误消息所说的内容。

问题是你提供了一个字符串，它可以是任何东西，但组件想要 keyof IconType，它不能只是任何字符串，而必须是一个与 { 中的一个键匹配的字符串{1}}。

要么提供与 IconType 匹配的字符串文字（或使用 keyof IconType 键入的变量/常量），将组件中 keyof IconType 属性的类型更改为 icon (但请注意，后一个选项将意味着 string 将需要可通过字符串索引）。