typescript - 说服 TypeScript 编译器过滤后的数组不包含空值

Question

我遇到了一个有趣的案例，TypeScript 编译器(使用 strictNullChecks === true)不允许我将数组过滤掉的空值传递给函数需要一个数字数组。

这是显示问题的代码示例:

class Test {
    constructor() {
        const values = [1, 2, null, 4].filter(x => x);
        this.printNumberArray(values);
    }

    printNumberArray(values: number[]) {
        console.log(values);
    }
}

这会导致在 values 下出现红色波浪线并出现此错误:

Argument of type '(number | null)[]' is not assignable to parameter of type 'number[]'.
  Type 'number | null' is not assignable to type 'number'.
    Type 'null' is not assignable to type 'number'.

const values: (number | null)[]

过滤器 保证消除空值，但显然编译器无法识别。

我可以通过将数组中的所有值转换为数字来解决这个问题，如下所示:

const values = [1, 2, null, 4]
    .filter(x => x)
    .map(x => x as number);

但我无法摆脱“一定有更好的方法”的感觉。

这就是我的问题，是否有推荐/最佳实践方法来做到这一点？

Answer 1

您可以利用 filter 具有与类型保护一起使用的重载这一事实:

filter<S extends T>(callbackfn: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[];

所以您需要做的就是将您的代码更改为:

class Test {
  constructor() {
    const isNotNull = <T>(x: T): x is NonNullable<T> => !!x;
    const values = [1, 2, null, 4].filter(isNotNull);
    this.printNumberArray(values);
  }

  printNumberArray(values: number[]) {
    console.log(values);
  }
}