Typescript 如何提取联合类型中的各成员独立类型

解决方案 #

我们可以基于TypeScript的分布式条件类型，实现你需要的通用联合成员提取工具：

// 通用类型提取工具：从联合类型U中提取所有包含属性P的成员
type ExtractUnionMemberByProp<P extends string | number | symbol, U> = U extends Record<P, any> ? U : never;

使用示例 #

针对你给出的联合类型，直接调用工具即可得到对应独立类型：

export type UnionedType = {a: number; /* 其他属性 */} | {b: string; /* 其他属性 */};

// 提取带a属性的成员类型
type TypeA = ExtractUnionMemberByProp<'a', UnionedType>;
// 等价于 type TypeA = {a: number; /* 其他属性 */}

// 提取带b属性的成员类型
type TypeB = ExtractUnionMemberByProp<'b', UnionedType>;
// 等价于 type TypeB = {b: string; /* 其他属性 */}

实现原理 #

• TypeScript的条件类型对联合类型默认是分布式执行的，会逐个遍历联合中的每个成员进行条件判断
• 上述工具类型会判断每个联合成员是否满足「拥有属性P」的约束，满足的就返回该成员本身，不满足的返回never
• 最终结果中never类型会自动从联合类型中移除，剩下的就是目标成员类型

如果需要更严格的匹配规则，比如同时校验属性的类型，可以使用扩展版工具：

// 扩展版：同时匹配属性名和属性类型
type ExtractUnionMemberByPropType<P extends string | number | symbol, PropType, U> = U extends Record<P, PropType> ? U : never;

// 示例：只提取a属性为number类型的成员
type TypeAWithNumberProp = ExtractUnionMemberByPropType<'a', number, UnionedType>;

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