TypeScript中filter()函数为何未返回预期的类型过滤后数组？

问题说明 #

TypeScript 默认不会根据 filter 的回调逻辑自动缩窄返回数组的类型：即使你在回调里写了item !== undefined的判断逻辑，TS 依然会认为返回的数组包含undefined类型，和预先定义的不含undefined的目标变量类型不匹配，抛出类型错误。

目前已有可运行的修复方案，但写法不够简洁：

简洁修复方案 #

方案1：内联类型谓词（零额外代码，最推荐） #

直接在filter的回调函数上标注类型谓词，明确告知TS回调返回true时对应元素的确定类型，不需要额外封装工具函数：

// 示例：原数组类型为 (string | undefined)[]，过滤后需要得到string[]
const result = arr.filter((item): item is string => item !== undefined);

写法中的(item): item is string是TS的类型谓词语法，经过该标注后，TS会自动识别filter的返回值为string[]，完全匹配目标变量类型，不会抛出类型错误。

方案2：通用非空过滤函数（多场景复用推荐） #

如果项目中有大量过滤null/undefined的需求，可以全局只封装一次通用判断函数，所有场景直接复用：

// 全局定义一次即可
const isNonNullable = <T>(value: T | null | undefined): value is T => value != null;

// 使用时直接传入函数，代码极简
const result = arr.filter(isNonNullable);

❌ 不推荐使用as 目标类型做强制类型转换，这种写法会跳过TS的类型校验，如果后续原数组新增了其他类型（比如number），TS不会抛出错误，容易留下类型隐患。

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