TypeScript使用类型守卫过滤联合类型数组时类型不匹配问题

问题原因 #

你的理解不存在错误，类型守卫本身确实具备类型收窄能力，该报错是 TypeScript 内置Array.filter方法的类型推导规则限制导致的：Array.filter默认只会返回原数组的元素类型，你在匿名回调函数内部使用的类型守卫不会被自动关联到filter的返回值类型上，因此推导出来的结果还是(A|B)[]，和你声明的A[]/B[]类型不匹配。

可用的解决方案 #

方案1：直接传入类型守卫函数（最简洁）

TS 的Array.filter存在支持类型守卫的重载，只要你直接把提前定义好的类型守卫函数作为参数传入，不需要额外包一层箭头函数，TS 就能正确识别类型：

// 无需额外标注，自动推导返回值为 A[]
let filteredA: A[] = mixed.filter(isA)
// 无需额外标注，自动推导返回值为 B[]
let filteredB: B[] = mixed.filter(isB)

方案2：显式标注回调函数的类型谓词返回值

如果你需要在回调中加额外的判断逻辑必须包一层箭头函数，可以手动给回调标注返回值为类型谓词，告诉 TS 该回调的返回结果可以用来收窄类型：

let filteredA: A[] = mixed.filter((e): e is A => {
  return isA(e)
  // 可在这里加其他判断逻辑
})

let filteredB: B[] = mixed.filter((e): e is B => {
  return isB(e)
  // 可在这里加其他判断逻辑
})

方案3：封装通用过滤工具函数（适合高频复用场景）

如果项目中经常需要按类型过滤联合类型数组，可以封装一个通用工具函数，一次封装多次使用，无需每次手动标注类型：

function filterByType<T, U extends T>(arr: T[], typeGuard: (item: T) => item is U): U[] {
  return arr.filter(typeGuard) as U[]
}

// 使用时自动推导类型
const filteredA = filterByType(mixed, isA) // 类型为 A[]
const filteredB = filterByType(mixed, isB) // 类型为 B[]

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