如何在TypeScript中通过链式过滤收窄联合类型？

针对你遇到的联合类型数组链式filter时类型无法正确收窄的问题，核心原因是之前的类型守卫函数固定了输入类型为原始联合类型，导致后续filter无法继承上一步的类型收窄结果。下面给出两种更优的实现方式：

方案一：泛化类型守卫函数 #

将类型守卫改成泛型版本，让它能接收当前步骤的输入类型，而非固定死原始联合类型：

// 泛型版类型守卫，支持逐步收窄类型
const hasName = <T>(x: T): x is T & { name: string } => 'name' in x;
const hasId = <T>(x: T): x is T & { id: string } => 'id' in x;

// 链式调用时类型自动逐步收窄
function foo(ary: MyUnionType[]) {
    ary.filter(hasName)
       .filter(hasId)
       .map(x => x.name + x.id); // ✅ 类型正确，可访问name和id
}

原理说明 #

第一次filter(hasName)后，数组类型变为(MyUnionType & {name: string})[]；第二次调用filter(hasId)时，泛型T会自动推断为上一步的收窄类型，因此返回的类型是T & {id: string}，即同时包含name和id的联合类型子集，TypeScript能正确识别这两个属性的存在。

方案二：通用属性存在守卫（更具扩展性） #

如果需要检查的属性较多，可以写一个通用的属性存在守卫函数，避免为每个属性单独编写守卫：

// 通用属性存在守卫，支持任意属性检查
const hasProperty = <T, K extends string>(obj: T, prop: K): obj is T & Record<K, unknown> => {
    return prop in obj;
};

// 使用示例
function foo(ary: MyUnionType[]) {
    ary.filter(x => hasProperty(x, 'name'))
       .filter(x => hasProperty(x, 'id'))
       .map(x => x.name + x.id); // ✅ 类型正确
}

优势对比 #

• 对比「编写特定组合过滤函数」：无需为每种属性组合单独编写守卫，扩展性拉满，新增属性只需调用通用守卫即可。
• 对比「内联过滤器带类型信息」：代码简洁易读，避免重复编写冗长的类型断言。

内容的提问来源于stack exchange，提问作者Dark Cadmium Orange