在 TypeScript 的过滤器和映射链中缩小对象属性的类型答案

【问题标题】：Narrow down a type of an object property within filter & map chain in TypeScript在 TypeScript 的过滤器和映射链中缩小对象属性的类型
【发布时间】：2021-08-27 08:12:00
【问题描述】：

我试图在过滤和映射时缩小和类型保护特定对象的属性，但我不完全理解如何做到这一点。

假设我得到了接口 Person 的以下对象数组：

interface IPerson {
   name: string;
   age: number;
   height: number | null;
}

const personArray: IPerson[] = [...]

假设我想先过滤那些不为空的，然后映射结果并对过滤掉的那些做一些事情。

personArray
   .filter((person) => person.height !== null)
   .map((person) => this.doSomethingAboutIt(person.height))

doSomethingAboutIt 函数只需要一个数字，而不是空值。这就是为什么我想先过滤非空值。但是 TypeScripts 显示一个错误，说 doSomethingAboutIt 期待的是 number，而不是 number | null。甚至认为在地图功能期间不应该有任何空值。当然 TypeScript 还不知道这一点。我以为它会自动推断，但我错了。

如何将类型缩小到仅对象属性上的数字？

谢谢。

【问题讨论】：

你需要一个过滤回调的类型保护。
是的，但我只是不知道如何在这个例子中完成它。我知道你可以做类似filter((item): item is Type => item !== null)) 的事情。但不知道如何处理对象属性。

标签： javascript typescript

【解决方案1】：

你需要按如下方式使用类型保护：

interface IPerson {
    name: string;
    age: number;
    height: number | null;
}

const doSomethingAboutIt = (h: number) => {};

const personArray: IPerson[] = [];
personArray
    .filter((person): person is IPerson & { height: number } => person.height !== null)
    .map((person) => doSomethingAboutIt(person.height));

【讨论】：

哇，太棒了。谢谢。我没有想到在那里连接& 来指定对象属性类型。