为何TypeScript类型守卫需执行两次过滤才能生效？

我遇到一个问题：使用同一类型守卫过滤数组时，必须执行两次才能得到预期的类型结果。具体代码如下：

// typing of arr as received from another function
const arr = [] as string[] | (string | false)[]

// my type guard
const truish = <T>(x: T | false): x is T => x !== false

// unexpected: (string | false)[] | string[]（实际为联合类型，无法正确窄化为string[]）
const unexpected = arr.filter(truish)

// expected: string[]
const expected = arr.filter(truish).filter(truish)

原因解释 #

这是TypeScript对联合类型数组的filter方法进行类型推导时的限制导致的：

• 原数组类型是string[] | (string | false)[]，属于数组类型的联合，而非元素为联合类型的数组。
• 第一次调用filter(truish)时，TypeScript会分别对联合中的每个数组分支做推导：
  1. 对于string[]分支：每个元素都是string，类型守卫判断全为true，过滤后仍为string[]。
  2. 对于(string | false)[]分支：类型守卫过滤掉false，过滤后应为string[]。
• 但TypeScript会保留两个分支的推导结果为联合类型string[] | string[]，部分场景下会被误显示为(string | false)[] | string[]，无法自动合并为单一的string[]。
• 第二次调用filter时，无论原联合分支是什么，过滤结果都是string[]，联合类型被合并为单一类型，因此得到预期结果。

解决方案 #

方案1：自定义重载过滤函数（推荐，类型安全且通用） #

写一个覆盖联合类型场景的重载过滤函数，让TypeScript直接推导正确类型：

// 重载定义，适配两种数组类型
function filterFalsy<T>(arr: (T | false)[]): T[];
function filterFalsy<T>(arr: T[]): T[];
// 实现逻辑
function filterFalsy<T>(arr: (T | false)[] | T[]) {
  return arr.filter(x => x !== false) as T[];
}

// 一次过滤得到string[]
const result = filterFalsy(arr);

方案2：先窄化数组类型再过滤 #

通过类型守卫先判断数组的具体分支，再针对性过滤：

let result: string[];
// 用every窄化数组类型为string[]
if (arr.every(item => typeof item === 'string')) {
  result = arr;
} else {
  // 此时arr被窄化为(string | false)[]，过滤后得到string[]
  result = arr.filter(truish);
}

方案3：安全类型断言 #

由于无论原数组是哪个分支，过滤结果必然是string[]，可以直接用类型断言：

const result = arr.filter(truish) as string[];

方案4：针对性类型守卫（特定场景） #

如果只需要处理string | false的场景，可定义非泛型的类型守卫：

const isString = (x: string | false): x is string => x !== false;
const result = arr.filter(isString); // 一次过滤得到string[]

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