TypeScript中使用reduce替代filter和map的方法及类型报错修复

TS 无法自动推导你给的初始空数组[]的类型，默认会将其推导为never[]（只能存放never类型值的数组），而你后续往数组中插入的是employer类型的对象，类型不匹配就触发了报错。

有两种常用的修复方式：

方式1：给初始值显式断言类型 #

直接给初始空数组标注为employer[]类型即可：

interface employer {
  name: string;
  age: number;
}

const arr: employer[] = [{name:'Amy',age:18},{name:'Bob',age:20}];

// 初始值加 as employer[] 显式指定类型
let data = arr.reduce((c, b) =>  b.age > 18 ? [...c, b] : c, [] as employer[])

console.log(data)

方式2：给reduce方法传入泛型参数 #

在调用reduce时直接指定泛型，明确累加值的类型为employer[]：

// 给reduce指定泛型参数
let data = arr.reduce<employer[]>((c, b) =>  b.age > 18 ? [...c, b] : c, [])

reduce的本质是遍历数组，对累加值进行自定义更新后返回，完全可以覆盖filter、map的能力，甚至可以一次遍历同时完成过滤+转换，减少数组遍历次数：

• 替代filter：判断当前项是否符合过滤条件，符合就加入累加数组，不符合就直接返回原累加数组，就是你当前的实现逻辑。
• 替代map：遍历每一项，对当前项做转换后加入累加数组，比如提取所有人员的姓名：

const names = arr.reduce<string[]>((c, b) => [...c, b.name], [])
// 等效于 arr.map(item => item.name)

• 同时替代filter+map：一次遍历完成过滤和转换，比如提取所有年龄大于18的人员姓名：

const adultNames = arr.reduce<string[]>((c, b) => {
  return b.age > 18 ? [...c, b.name] : c
}, [])
// 等效于 arr.filter(item => item.age > 18).map(item => item.name)，但只遍历一次数组

内容的提问来源于stack exchange，提问作者sun1211