TypeScript 从数组中过滤掉空值

Question

TypeScript，--strictNullChecks 模式。

假设我有一个可空字符串数组(string | null)[]。什么是single-expression 方法来删​​除所有空值，以使结果具有string[] 类型？

const array: (string | null)[] = ["foo", "bar", null, "zoo", null];
const filterdArray: string[] = ???;

Array.filter 在这里不起作用：

// Type '(string | null)[]' is not assignable to type 'string[]'
array.filter(x => x != null);

数组推导可以工作，但 TypeScript 不支持。

实际上，该问题可以概括为通过从联合中删除具有一种特定类型的条目来过滤任何联合类型的数组的问题。但让我们关注具有 null 和可能未定义的联合，因为这些是最常见的用例。

Answer 1

您可以在.filter 中使用type predicate 函数来避免选择退出严格类型检查：

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 value !== null;，您将不会看到编译器错误，即使该函数将在undefined 上错误地返回true。

缓解这种情况的一种方法是首先使用控制流块来约束类型，然后使用虚拟变量来让编译器检查一些内容。在下面的示例中，编译器能够推断出value 参数在进行赋值时不能是null 或undefined。但是，如果您从 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;
}

请注意：在某些情况下，这种方法仍然会让您失败。请务必注意与contravariance 相关的问题。

Answer 2

类似于@bijou-trouvaille 的回答，您只需将<arg> is <Type> 声明为过滤器函数的输出：

array.filter((x): x is MyType => x !== null);

Answer 3

还有一个更好的衡量标准，因为人们经常忘记flatMap，它可以一次性处理filter 和map（这也不需要对string[] 进行任何转换）：

// (string | null)[]
const arr = ["a", null, "b", "c"];
// string[]
const stringsOnly = arr.flatMap(f => f ? [f] : []);

Answer 4

您可以将filter 结果转换为您想要的类型：

const array: (string | null)[] = ["foo", "bar", null, "zoo", null];
const filterdArray = array.filter(x => x != null) as string[];

这适用于您提到的更一般的用例，例如：

const array2: (string | number)[] = ["str1", 1, "str2", 2];
const onlyStrings = array2.filter(x => typeof x === "string") as string[];
const onlyNumbers = array2.filter(x => typeof x === "number") as number[];

(code in playground)

Answer 5

一个班轮：

const filteredArray: string[] = array.filter((s): s is string => Boolean(s));

TypeScript playground

诀窍是传递type predicate（:s is string 语法）。

This answer 表示Array.filter 要求用户提供类型谓词。

Answer 6

为了避免每个人都不得不一遍又一遍地编写相同的类型保护辅助函数，我将名为 isPresent、isDefined 和 isFilled 的函数捆绑到一个辅助库中：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 在中捆绑此功能时，我将删除该包。但是，现在，享受吧。

Answer 7

如果你已经使用 Lodash，你可以使用compact。 或者，如果你更喜欢 Ramda，ramda-adjunct 也有 compact 函数。

两者都有类型，因此您的 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[];

Answer 8

这是一个比@bijou-trouvaille 接受的答案更简洁的解决方案

const notEmpty = <T>(value: T): value is NonNullable<typeof value> => !!value 

const array: (string | null | undefined)[] = ['foo', 'bar', null, 'zoo', undefined];

const filteredArray: string[] = array.filter(notEmpty);
console.log(filteredArray)
[LOG]: ["foo", "bar", "zoo"]

Answer 9

我相信除了类型检查只是使过滤后的类型与返回类型没有什么不同之外，一切都很好。

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

Answer 10

简单地使用

array.filter(Boolean);

这适用于所有真值。

不幸的是，这不提供类型推断，找到了这个解决方案 here

type Truthy<T> = T extends false | '' | 0 | null | undefined ? never : T; //from lodash 

function truthy<T>(value: T): value is Truthy<T> {
    return Boolean(value);  //  or !!value
}

const arr =["hello","felow","developer","",null,undefined];

const truthyArr = arr.filter(truthy);

// the type of truthyArr will be string[]

Answer 11

我认为这将是一种简单的方法，代码更简洁

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

Answer 12

如果您使用过滤器检查 null 与其他条件，则可以使用此方法，希望这对正在寻找object array 解决方案的人有所帮助

array.filter(x => x != null);
array.filter(x => (x != null) && (x.name == 'Tom'));

Answer 13

TypeScript 有一些实用程序可以推断数组的类型并从中排除 null 值：

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

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

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

比在新阵列上手动投射 as string[] 更长但更安全。

一步一步：

1. 从原始数组中获取类型：

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

1. 排除null 值：

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

1. 将其设为数组：

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

链接：

• NonNullable（官方文档）
• typeof array[number]（博客文章，我在官方文档上找不到任何相关信息）

Answer 14

您也可以使用双重否定 (!!) 过滤掉所有 falsy 值：

• 空
• 未定义
• 空字符串“”（''）
• 数字0
• 数字 NaN 例如，

    array?.filter(item => !!item).map((item: any)

Answer 15

使用reduce

一些答案​​建议reduce，方法如下：

const languages = ["fr", "en", undefined, null, "", "de"]

// the one I prefer:
languages.reduce<string[]>((previous, current) => current ? [...previous, current] : previous, [])

// or
languages.reduce((previous, current) => current ? [...previous, current] : previous, Array<string>())

// or
const reducer = (previous: string[], current: string | undefined | null) => current ? [...previous, current] : previous
languages.reduce(reducer, [])

结果：["fr", "en", "de"]

TS 游乐场here.

Answer 16

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