TypeScript下React组件定义联合类型prop后传参报错如何解决

报错原因 #

你为statusColour定义的返回值类型是宽泛的string，TypeScript无法确认你动态取到的字符串值，刚好落在Tag组件要求的"green" | "red" | "grey" | "yellow"这几个限定值范围内，因此抛出类型不匹配错误。

解决方案（按推荐度排序） #

方案1：收紧类型定义（最推荐，完全类型安全）

先将Variant的联合类型抽离复用，再为statusColour指定精准的返回值类型：

// 组件Props定义文件中抽离Variant类型
export type Variant = "green" | "red" | "grey" | "yellow";
export type Props = {
  variant: Variant;
};

定义statusColour时指定返回值为Variant类型：

const statusColour: { [key: string]: Variant } = {
  running: "green",
  stopped: "red",
  idle: "grey",
  default: "green"
};

此时从statusColour中取出的值天然符合Tag组件的prop类型要求，不会再报错。

方案2：用as const自动推导精确类型

如果不想额外抽离类型，可以用as const将statusColour标记为只读常量，让TypeScript自动推导每个值的字面量类型：

const statusColour = {
  running: "green",
  stopped: "red",
  idle: "grey",
  default: "green"
} as const;

取值时对key做一次类型断言即可：

const variant = statusColour[value as keyof typeof statusColour] ?? statusColour.default;

方案3：临时类型断言（仅应急使用）

如果只是临时调试，确定取值一定符合要求，可以直接对传入的variant做类型断言跳过校验：

<Tag variant={variant as "green" | "red" | "grey" | "yellow"} />

注意：该方案会绕过类型校验，若实际传入不符合要求的值不会被TS捕获，不推荐长期使用。

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