TypeScript错误：string类型无法赋值给联合类型的排查与解决

问题根源 #

你定义的ROLE_TAGS常量，TypeScript默认会把它的属性值推断成宽泛的string类型，而Tag组件的variant要求的是固定的联合类型成员（比如'primary'|'secondary'这类预定义值）。这种宽泛的string类型和variant的严格类型不兼容，所以触发了TS2322类型不匹配错误。

修复方法 #

方法1：用as const锁定字面量类型 #

直接在ROLE_TAGS定义末尾加as const，让TypeScript把每个属性值锁定为具体的字面量类型，而不是宽泛的string：

// 假设Tag组件的variant类型是 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
const ROLE_TAGS = {
  BA: 'primary',
  BM: 'secondary',
  BP: 'success',
  FR: 'warning',
  RM: 'danger'
} as const;

interface RoleTagProps {
  roleType: 'BA' | 'BM' | 'BP' | 'FR' | 'RM';
}

const RoleTag = ({ roleType }: RoleTagProps) => {
  return <Tag variant={ROLE_TAGS[roleType]}>{roleType}</Tag>;
};

as const会让对象变成只读，同时把属性值的类型精确到具体字符串，这样ROLE_TAGS[roleType]的类型就完全匹配variant的要求了。

方法2：显式指定ROLE_TAGS的类型 #

如果需要ROLE_TAGS可以修改（一般不推荐，角色映射通常是固定的），可以显式给它指定类型，强制每个属性值都符合variant的要求：

// 先定义Tag的variant类型，比如从组件库导入或自己声明
type TagVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'danger';

interface RoleTagProps {
  roleType: 'BA' | 'BM' | 'BP' | 'FR' | 'RM';
}

const ROLE_TAGS: Record<RoleTagProps['roleType'], TagVariant> = {
  BA: 'primary',
  BM: 'secondary',
  BP: 'success',
  FR: 'warning',
  RM: 'danger'
};

const RoleTag = ({ roleType }: RoleTagProps) => {
  return <Tag variant={ROLE_TAGS[roleType]}>{roleType}</Tag>;
};

这种写法会在定义ROLE_TAGS时就校验每个值的合法性，避免后续赋值出错。

方法3：用枚举管理映射关系 #

如果角色和variant的映射是固定业务规则，用枚举来管理会更清晰：

type TagVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'danger';

enum RoleToVariant {
  BA = 'primary',
  BM = 'secondary',
  BP = 'success',
  FR = 'warning',
  RM = 'danger'
}

interface RoleTagProps {
  roleType: keyof typeof RoleToVariant;
}

const RoleTag = ({ roleType }: RoleTagProps) => {
  return <Tag variant={RoleToVariant[roleType]}>{roleType}</Tag>;
};

枚举的成员值会被TypeScript识别为具体的字面量类型，同样能解决类型不兼容问题，还能让映射关系更直观。

内容的提问来源于stack exchange，提问作者Ludwig