将类型键映射到字符串，然后映射到Typescript中的字符串类型

Question

我正在尝试创建一个React组件，以扩展Github在@githubprimer/octicons-react提供的Octicons图标库。

图书馆的出口商品之一是iconsByName类型，它看起来像这样：

type iconsByName = {
  'alert': Icon<16, 16>,
  'arrow-down': Icon<10, 16>,
  'arrow-left': Icon<10, 16>,
  'arrow-right': Icon<10, 16>,
  ...
}

在我的组件中，我想创建一个使用icon道具并从iconsByName导出键动态生成列表的接口。最后，我的界面应类似于：

界面Octicon

Props {
   icon: "alert" | "arrow-down" | "arrow-left" | "arrow-right" | ...;
}

但是我无法使用Object.keys(iconsByName)来生成该列表。如何以编程方式创建一个类型，然后传递给接口？

Answer 1

您可以使用keyof类型运算符来获取所有类型的键的并集：

type iconsByName = {
    'alert': Icon<16, 16>,
    'arrow-down': Icon<10, 16>,
    'arrow-left': Icon<10, 16>,
    'arrow-right': Icon<10, 16>,
}

interface Props {
    icon: keyof iconsByName
}