我怎樣才能正確地輸入這個？

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是string類型，因為這就是錯誤消息所說的。

問題是您要提供一個字符串，它可以是任何東西，但組件需要keyof IconType ，它不能只是任何字符串，而必須是與IconType中的鍵之一匹配的字符串。

要么提供與keyof IconType匹配的字符串文字（或使用keyof IconType鍵入的變量/常量），將組件中icon道具的類型更改為string （但請注意，后一個選項將意味着Icons需要可通過字符串索引）。