Typescript如何定义React Alert组件四选一的互斥Props类型

实现思路 #

通过TypeScript联合类型+映射类型，构造仅允许单个状态属性存在的互斥类型规则，未选中的其余状态属性会被显式标记为never，不符合规则时会直接触发TS校验报错。 #

完整实现代码 #

// 定义所有支持的状态类型
type MessageVariant = "info" | "success" | "warning" | "error";

// 自动生成互斥的状态属性联合类型
type VariantProps = {
  [K in MessageVariant]: Record<K, boolean> & Partial<Record<Exclude<MessageVariant, K>, never>>
}[MessageVariant];

// 组合公共属性与互斥状态属性，得到最终组件Props类型
type AlertProps = {
  id: string;
} & VariantProps;

校验效果验证 #

完全匹配需求规则：

• <Alert id="abc" info /> ✅ 合法
• <Alert id="abc" success /> ✅ 合法
• <Alert id="abc" /> ❌ 未传入任何状态属性，TS报错
• <Alert id="abc" info success /> ❌ 同时传入多个状态属性，TS报错

扩展说明 #

该方案后续新增状态类型时，仅需要在MessageVariant联合类型中添加新的状态值即可，无需修改其他类型逻辑，维护成本极低。

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