Typescript 基于导入的对象设置有效的字符串属性/以编程方式创建字符串文字类型

我正在将React项目转换为使用TypeScript，并且我有一个

图标

组件，该组件接受一个prop，它是一个字符串，但应该是一个有效的CSS类名

我用React的PropTypes处理这个问题的方式是

Icon.propTypes = {
  icon: oneOf(Object.keys(css)).isRequired,
}

有没有一种方法可以在TypeScript中实现同样的功能，而不必像这样在字符串文本类型中键入每个类名

interface Props {
  icon: "class1" | "class2" | ...
}

---

如果您的

css

对象类似于：

const css = {
    "class1": "something",
    "class2": "something",
    "classN": "something"
}

然后你可以这样做：

interface Props {
    icon: keyof typeof css
}

// fine:
let props: Props = {
    icon: "class1"
}

但这是：

let props: Props = {
    icon: "something else"
}

导致错误：

类型“{icon:“其他”；}”不可分配给类型“Props”。
属性“icon”的类型不兼容。
类型“something other”不可分配给类型“class1”|“class2”|“classN”