时间戳

首页 > 解决方案 > TypeScript 未选择过滤器以删除未定义的项目

typescript - TypeScript 未选择过滤器以删除未定义的项目

问题描述

在下面的代码中，我不想添加undefined为过滤设备的类型注释。我认为过滤设备永远不应该是未定义的，因为我过滤掉了未定义的设备。

但是如果我删除undefined类型注释，TypeScript 会抱怨Type 'ICouchDBDocument | undefined' is not assignable to type 'ICouchDBDocument'.

devices
.filter((device: ICouchDBDocument | undefined) => Boolean(device)) //should filter away all undefined devices?
.map((filteredDevice: ICouchDBDocument | undefined) => { ... })

如何更改我的代码以使过滤器对类型注释产生影响？

标签： typescript

解决方案

解决方案是传递一个类型保护函数，告诉 TypeScript 你正在过滤掉undefined类型的一部分：

devices
.filter((device): device is ICouchDBDocument => Boolean(device)) //filters away all undefined devices!
.map((filteredDevice) => {
    // yay, `filteredDevice` is not undefined here :)
})

如果您经常需要这样做，那么您可以创建一个适用于大多数类型的通用实用程序函数：

const removeNulls = <S>(value: S | undefined): value is S => value != null;

这里有些例子：

devices
.filter(removeNulls)
.map((filteredDevice) => {
    // filteredDevice is truthy here
});


// Works with arbitrary types:
let maybeNumbers: (number | undefined)[] = [];

maybeNumbers
    .filter(removeNulls)
    .map((num) => {
        return num * 2;
    });

（我没有使用该Boolean函数removeNulls以防人们想将它与number类型一起使用 - 否则我们也会不小心过滤掉虚假0值！）

谢谢，我一直在想同样的事情，但你的问题促使我终于解决了:)

查看 TypeScript 的lib.es5.d.ts，该Array.filter函数具有此类型签名（它实际上在文件中有两个，但这是与您的问题相关的一个）：

/**
 * Returns the elements of an array that meet the condition specified in a callback function.
 * @param callbackfn A function that accepts up to three arguments. The filter method calls the callbackfn function one time for each element in the array.
 * @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
 */
filter<S extends T>(callbackfn: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[];

所以，这其中的关键是value is Scallbackfn 的返回类型，说明它是一个用户自定义的类型守卫。

推荐阅读