从对象键动态创建类型答案

【问题标题】：Create a type from object keys dynamically从对象键动态创建类型
【发布时间】：2019-10-20 21:02:29
【问题描述】：

我有一个动态创建的 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' | ....

【问题讨论】：

类型是一个静态概念。假设您以某种方式定义了您的类型，例如：type IconMapMember = 'angleDoubleRight' | 'angleRight'|... ，那么在向iconMap 对象添加新属性后您将要做什么？类型不能在运行时修改，它们是用于编译时的。
这一切都归结为您所说的“动态”。如果您的意思是“在运行时”，那么您将无能为力。如果您的意思是“以编程方式在 TypeScript 编译器运行之前发生的某个构建步骤中”，或者甚至“在编译器可以看到的其他一些用户编写的代码中”，那么您可以做一些事情。

标签： typescript typescript-typings

【解决方案1】：

在你的问题中你说你不能使用keyof，但我不知道为什么。如果您有一个在编译时知道其键的对象（这意味着在您编译使用它的 TypeScript 代码之前生成了 iconMap 变量），您可以使用 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

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

【讨论】：

你说得对，我遇到了麻烦，因为我将 iconMap 对象作为 JSON.. 谢谢！
非常感谢。 keyof typeof constant 就是我要找的东西！