TypeScript 類型，僅接受 object 的密鑰

Question

我不知道這是否真的可能，但我有一個現有的 object 將字符串鍵映射到 React 組件。

我想創建一個類型以使父組件僅接受圖標映射 object 的鍵作為道具：

export const icons: { readonly [key: string]: React.VFC } = Object.freeze({})

type IconProps = {
  name: // every key of `icons`
}

export const Icon: React.VFC = ({ name }) => {
  return icons[name]({})
}

再說一次，我不知道這是否可能，但如果是的話，那就太棒了。

此外，如果您建議使用不同的標題以使其更易於搜索和描述我實際想要完成的工作，我很樂意更新它。

Answer 1

在這種情況下，您需要創建一個enum (IconName) 來查看圖標的名稱並將其分配給鍵。

type IconName = 'homeIcon' | 'ballIcon';
type IconMap = {
    [key in IconName]?: React.VFC;
};


const icons: IconMap = {
  homeIcon: <ExampleComponent />,
  ballIcon: <ExampleComponent />
};

要在父組件上查看此類型，您需要將IconName類型放入組件Generics中，如下所示：

type IconProps = {
  name: IconName
}

export const Icon: React.VFC<IconProps> = ({ name }) => {
  // on this return you need to return only the value.  
  return icons[name]; 
}