设置有效的字符串道具根据导入的对象/编程创建字符串字面型

Question

我转换阵营项目中使用打字稿，和我有一个Icon组件需要的道具是一个字符串，而应该是一个有效的CSS班级名称。

我这件事情的方式作出反应的PropTypes是

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

有没有办法实现打字稿同样的事情，没有一个字符串类型这样的打字每一个类的名字吗？

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

Answer 1

如果您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" 
} 

导致一个错误：

Type '{ icon: "something else"; }' is not assignable to type 'Props'.
Types of property 'icon' are incompatible.
Type '"something else"' is not assignable to type '"class1" | "class2" | "classN"'.