TypeScript中过滤数组非null值遇类型不匹配错误求助

你遇到的问题是因为TypeScript默认不会自动推断filter操作后数组的类型——哪怕你写了o !== null的过滤条件，它依然认为返回的数组是(number | null)[]，所以赋值给number[]类型的变量会触发类型不兼容错误。

下面是几种可行的解决方法：

方法1：使用类型谓词（推荐） #

定义一个类型守卫函数，明确告诉TypeScript满足条件的元素是number类型：

function isNumber(value: number | null): value is number {
  return value !== null;
}

let x1: (number | null)[] = [null, 1, 2, 3, null];
let x2: number[] = x1.filter(isNumber);

这里的value is number就是类型谓词，当函数返回true时，TypeScript会认定该元素是number类型，filter后的数组类型会被正确推断为number[]。

方法2：直接在filter回调中写类型谓词 #

如果不想单独定义函数，可以把类型谓词直接写在箭头函数里，写法更简洁：

let x1: (number | null)[] = [null, 1, 2, 3, null];
let x2: number[] = x1.filter((item): item is number => item !== null);

方法3：使用类型断言（仅临时应急） #

如果只是快速解决问题，可以用类型断言强制转换类型，但这种方式会跳过TypeScript的类型检查，若后续过滤逻辑出错可能引入隐患：

let x1: (number | null)[] = [null, 1, 2, 3, null];
let x2: number[] = x1.filter(o => o !== null) as number[];

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