从对象键动态创建类型

Question

我有一个动态创建的 icon-Map.json。例子：

const iconMap = {
    angleDoubleRight: 'angleDoubleRight.svg',
    angleRight: 'angleRight.svg',
    assets: 'assets.svg',
    barChart: 'barChart.svg',
    cancel: 'cancel.svg',
    chevronDown: 'chevronDown.svg',
    dotChart: 'dotChart.svg',
    dotMenu: 'dotMenu.svg',
    horizontalDots: 'horizontalDots.svg'
    ...

};

• 我无法从这个对象手动创建接口，因为我是动态创建的，所以我不能使用 keyof。

• 最终，我想创建一种可以在组件外部使用的 iconMap 键，它只会将我的输入限制为 iconMap 的键。（联合或枚举）：

 type IconMapMember = 'angleDoubleRight' | 'angleRight' | 'assets' | ....

Answer 1

在您的问题中，您说您不能使用keyof，但我不确定为什么。如果您有一个对象，其键在编译时是已知的（这意味着该iconMap变量是在您编译使用它的 TypeScript 代码之前生成的），您可以使用typeof 类型查询运算符来获取其类型，然后keyof在其上使用：

const iconMap = {
  angleDoubleRight: "angleDoubleRight.svg",
  angleRight: "angleRight.svg",
  assets: "assets.svg",
  barChart: "barChart.svg",
  cancel: "cancel.svg",
  chevronDown: "chevronDown.svg",
  dotChart: "dotChart.svg",
  dotMenu: "dotMenu.svg",
  horizontalDots: "horizontalDots.svg"
  //...
};

type IconMapMember = keyof typeof iconMap;
// type IconMapMember = "angleDoubleRight" | "angleRight" | "assets" | "barChart" 
// | "cancel" | "chevronDown" | "dotChart" | "dotMenu" | "horizontalDots" ...

代码链接

如果您有一些阻止此解决方案工作的特定问题，请使用有关您的构建过程的更多详细信息更新您的问题。希望这可以帮助; 祝你好运！