Question

我正在将React项目转换为使用TypeScript，并且我有一个Icon组件，它接受一个字符串的prop，但应该是一个有效的CSS类名。

我使用React的PropTypes处理此问题的方法是

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

有没有办法在TypeScript中实现相同的功能，而不是像这样输入字符串文字类型中的每个类名？

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"
}

导致错误：

输入＆＃39; {icon：＆＃34;其他内容＆＃34 ;; }＆＃39;不能分配类型＆＃39;道具＆＃39;。
  财产类型＆＃39; icon＆＃39;是不相容的。
      输入＆＃39;＆＃34;其他内容＆＃34;＆＃39;不能分配给＆＃39;＆＃34; class1＆＃34; | ＆＃34;等级2＆＃34; | ＆＃34; classN＆＃34;＆＃39;

根据导入的对象设置有效的字符串prop /以编程方式创建字符串文字类型

1 个答案: