我试图使用数组从数组中过滤空(未定义)元素.原型filter,但TypeScript编译器似乎无法识别"filter"函数的派生数组,无法通过类型判断.

假设下面的简化代码中有一个数组的(number | undefined)[]类型,并希望筛选未定义的数组以适应number[]array.

const arry = [1, 2, 3, 4, "5", 6];
const numArry: number[] = arry
    .map((i) => {
        return typeof i === "number" ? i : void 0;
    })
    .filter((i) => i);

错误显示:

类型"(编号|未定义)[]"不能分配给类型"编号[]".

我可以将生成的数组强制转换为如下所示的数字[],知道filter函数删除未定义的内容.

const arry = [1, 2, 3, 4, "5", 6];
const numArry: number[] = (arry
    .map((i) => {
        return typeof i === "number" ? i : void 0;
    })
    .filter((i) => i) as Number[]);

除了铸造,还有更好的方法实现这一点吗?

环境:TSC2.1已启用strictNullChecks.

推荐答案

使用TypeScript的用户定义类型保护功能:

const arry = [1, 2, 3, 4, "5", 6];
const numArry: number[] = arry
    .filter((i): i is number => {
        return typeof i === "number";
    });
// numArry = [1, 2, 3, 4, 6]

看看回调函数中的i is number.

Typescript相关问答推荐

在TypScript中的同一数组中验证不同类型

从传递的数组中出现的值设置返回键的类型

使用新控制流的FormArray内部的Angular FormGroup

如何使用Generics保留构造函数的类型信息?

界面中这种类型的界面界面中的多态性

node—redis:如何在redis timeSeries上查询argmin?

typescribe不能使用值来索引对象类型,该对象类型满足具有该值的另一个类型'

使用带有RxJS主题的服务在Angular中的组件之间传递数据

TypeScript Page Routing在单击时不呈现子页面(React Router v6)

接口的额外属性作为同一接口的方法的参数类型'

如何使用函数填充对象?

如何在LucideAngular 添加自定义图标以及如何使用它们

在函数中打字推断记录的关键字

以Angular 自定义快捷菜单

错误:NG02200:找不到类型为';对象';的其他支持对象';[对象对象]';.例如数组

如何在Nextjs路由处理程序中指定响应正文的类型

为什么看起来相似的代码在打字时会产生不同的错误?

使用泛型以自引用方式静态键入记录的键

记录的子类型<;字符串,X>;没有索引签名

Karma Angular Unit测试如何创建未解析的promise并在单个测试中解决它,以判断当时的代码是否只在解决后运行