reactjs - 如何检查给定的字符串是字符串文字类型还是其他字符串值

Question

我已经定义了一个字符串文字类型。

type MyColor =
  | 'primary'
  | 'secondary'
  | 'accent';

以及一个接受该类型或其他字符串的 React 组件。

color如果道具匹配，我想设置类名MyColor，或者color是十六进制代码，例如'#dedede'然后设置background-color为颜色。

interface MyComponentProps {
  color: MyColor | string;
}

const MyComponent = (props: MyComponentProps) => {
  let className = '';
  let style = {};
  if (props.color IS MyColor) { // This is what I want to know.
    className = `bg-${props.color}`;
  } else {
    style = { backgroundColor: props.color };
  }

  return (
    <div
      className={className}
      style={style}
    >Hello!</div>
  );
}

export default MyComponent

有没有简单的方法来实现这一点？还是我应该创建一个检查所有可用值的函数？

更新

如果我使用数组创建一个检查函数，那么使用 TypeScript 的编辑器就没有帮助。

function isMyColor(color: string): boolean {
  if (['primary', 'secomdary'].includes(color as MyColor) {
    return true;
  }

  return false;
}

我有一个错字secondary并省略了，accent但我的编辑器（VSCode）和 TypeScript 编译器都没有发出警告。

标签： reactjsstringtypescript