typescript - 从对象键动态创建类型

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'
    ...

};

我无法从此对象手动创建接口(interface)，因为我是动态创建的，因此无法使用 keyof。

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

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

Answer 1

在您的问题中，您说您不能使用 keyof ，但我不确定为什么。如果您有一个对象，其键在编译时是已知的(这意味着 iconMap 变量是在您编译使用它的 TypeScript 代码之前生成的)，您可以使用 typeof type query operator获取其类型，然后使用 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" ...

Link to code

如果您有一些特殊问题导致此解决方案无法正常工作，请使用有关构建过程的更多详细信息更新您的问题。希望这可以帮助;祝你好运!