TypeScript中如何判断字符串是否属于指定string literal类型

算力阿峰

2026-9-26

解决思路

TypeScript的类型仅存在于编译阶段，运行时无法直接判断类型，因此必须要有运行时的校验逻辑。你可以通过「从运行时常量派生TS类型」的方式，避免手动维护两套逻辑导致的不一致问题，同时自动获得拼写校验能力。

具体实现

步骤1：将联合类型的取值统一为唯一数据源

不要先手动写string literal联合类型，而是先定义运行时可用的常量数组，再从数组派生类型，保证类型和运行时校验的取值完全同步：

// 所有MyColor的取值只维护这一个数组即可，用as const固定值类型
const MY_COLORS = ['primary', 'secondary', 'accent'] as const;
// 从数组自动提取联合类型，不需要手动枚举
type MyColor = typeof MY_COLORS[number];

步骤2：实现带类型收窄的校验函数

用类型谓词定义类型守卫函数，判断后TS会自动收窄变量类型：

function isMyColor(color: string): color is MyColor {
  return MY_COLORS.includes(color as MyColor);
}

步骤3：在组件中直接使用

interface MyComponentProps {
  color: MyColor | string;
}

const MyComponent = (props: MyComponentProps) => {
  let className = '';
  let style: React.CSSProperties = {};
  if (isMyColor(props.color)) {
    className = `bg-${props.color}`;
  } else {
    style = { backgroundColor: props.color };
  }

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

export default MyComponent