const filterdArray = array.filter(f => !!f) as string[];

如果您已经使用了Lodash，您可以使用compact。 或者，如果你喜欢Ramda, Ramda的附属品也有紧凑的功能。

两者都有类型，所以您的tsc会很高兴，并得到正确的类型。

从Lodash d.ts文件:

/**
 * Creates an array with all falsey values removed. The values false, null, 0, "", undefined, and NaN are
 * falsey.
 *
 * @param array The array to compact.
 * @return Returns the new array of filtered values.
 */
compact<T>(array: List<T | null | undefined | false | "" | 0> | null | undefined): T[];

我相信除了类型检查只是让过滤后的类型与返回类型不不同之外，您都做得很好。

const array: (string | null)[] = ["foo", "bar", null, "zoo", null];
const filterdArray: string[] = array.filter(f => f !== undefined && f !== null) as any;
console.log(filterdArray);

你可以在.filter中使用类型谓词函数来避免选择退出严格的类型检查:

function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
    return value !== null && value !== undefined;
}

const array: (string | null)[] = ['foo', 'bar', null, 'zoo', null];
const filteredArray: string[] = array.filter(notEmpty);

你也可以使用array.reduce<string[]>(…)。

2021年更新:更严格的谓词

虽然这种解决方案适用于大多数场景，但您可以在谓词中进行更严格的类型检查。如前所述，函数notEmpty实际上并不能保证它在编译时正确地识别值是null还是undefined。例如，尝试将其return语句缩短为return value !== null;，您将不会看到编译器错误，即使函数将在undefined上错误地返回true。

缓解这种情况的一种方法是首先使用控制流块约束类型，然后使用一个虚拟变量让编译器进行检查。在下面的例子中，编译器能够推断出value参数在赋值时不能为null或未定义。但是，如果您从if条件中删除|| value === undefined，则会看到编译器错误，通知您上面示例中的错误。

function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
  if (value === null || value === undefined) return false;
  const testDummy: TValue = value;
  return true;
}

提醒一句:在某些情况下，这种方法仍然会失败。一定要注意与逆变相关的问题。

为了避免每个人都不得不一遍又一遍地编写相同类型的保护helper函数，我将称为isPresent, isDefined和isfill的函数绑定到一个helper库:https://www.npmjs.com/package/ts-is-present

当前类型定义为:

export declare function isPresent<T>(t: T | undefined | null): t is T;
export declare function isDefined<T>(t: T | undefined): t is T;
export declare function isFilled<T>(t: T | null): t is T;

你可以这样使用:

import { isDefined } from 'ts-is-present';

type TestData = {
  data: string;
};

const results: Array<TestData | undefined> = [
  { data: 'hello' },
  undefined,
  { data: 'world' }
];

const definedResults: Array<TestData> = results.filter(isDefined);

console.log(definedResults);

当Typescript捆绑这个功能时，我将删除这个包。但是，现在，享受吧。

TypeScript有一些实用工具来推断数组的类型并排除null值:

const arrayWithNulls = ["foo", "bar", null, "zoo", null]

type ArrayWithoutNulls = NonNullable<typeof arrayWithNulls[number]>[]

const arrayWithoutNulls = arrayWithNulls.filter(x => x != null) as ArrayWithoutNulls

比在新数组上手动转换为string[]更长，但更安全。

循序渐进:

从原始数组中获取类型:

typeof arrayWithNulls[number] // => string | null

排除空值:

NonNullable<typeof arrayWithNulls[number]> // => string

让它成为一个数组:

NonNullable<typeof arrayWithNulls[number]>[] // => string[]

链接:

NonNullable(官方文档) typeof array[number](博客文章，我在官方文档中找不到任何关于它的东西)