TypeScript不同重叠枚举组件传参类型不兼容问题求解

当组件接收AType枚举类型参数，但传入BType枚举的重叠值（如BType.word）时，TypeScript会因枚举类型不匹配报错，且Pick<BType, "word">无法解决（因为Pick针对对象键值类型，不适用于枚举）。以下是几种可行的解决方式：

1. 显式类型转换（简单直接） #

直接将传入的枚举值断言为目标枚举类型，前提是你确认该值确实存在于目标枚举中：

// 直接断言
<MyComponent arg={arg2 as AType} />

// 更安全的方式：先检查值是否属于目标枚举
if (Object.values(AType).includes(arg2 as unknown as AType)) {
  <MyComponent arg={arg2 as AType} />
}

2. 改用枚举的底层值类型定义组件参数 #

将组件参数类型从枚举类型改为枚举的实际值类型（字符串/数字字面量集合），这样只要值匹配，无论来自哪个枚举都能兼容：

// 提取AType的所有值类型
type ATypeValue = typeof AType[keyof typeof AType];

// 组件参数改为值类型
const MyComponent = (arg: ATypeValue) => {};

// 此时传入BType.word不会报错，因为其值为"WORD"，属于ATypeValue范围
<MyComponent arg={BType.word} />

3. 定义共享类型规范枚举 #

如果两个枚举存在业务关联，可以先定义共享的字面量类型，再让枚举遵循该类型，组件直接接收共享类型：

// 定义共享的基础值类型
type SharedType = "SOME" | "WORD" | "OTHER";

// 用satisfies确保枚举值符合共享类型
export enum AType {
  some = "SOME",
  word = "WORD",
} satisfies Record<string, SharedType>;

export enum BType {
  other = "OTHER",
  word = "WORD",
} satisfies Record<string, SharedType>;

// 组件接收共享类型
const MyComponent = (arg: SharedType) => {};

// 传入任意枚举的匹配值都兼容
<MyComponent arg={BType.word} />

为什么Pick<BType, "word">无效？ #

Pick<BType, "word">返回的是{ word: BType.word }这个对象类型，而非枚举值的类型，和组件要求的AType枚举类型完全不匹配，因此无法解决类型兼容问题。

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