TS中, Array.reduce提示没有与此调用匹配的重载?-Toy模板网

这篇具有很好参考价值的文章主要介绍了TS中, Array.reduce提示没有与此调用匹配的重载?。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

起因

一个feature开发, 结果需求评审、工时预估, 简直是事故级别的. 最后, 迫于无奈, 全组人都得上去救火...

今天, 帮忙改bug的时候, 发现新checkout下来的代码, 还带着新鲜的语法错误...简直大无语.

翻了遍代码, 发现很多地方都存在Array.reduce类型重载相关的问题, 简单记录一下解决过程.

排查过程

大家的vscode都不装语法提示插件么? 代码挂着红线, 就扔代码库了??? 抽时间, 得把hook安排上了

// 业务代码不方便外流, 简单写了个demo, 问题原因相同
const nums = [1, 2, 3, 4, 5];

const sum = nums.reduce((pre, cur) => {
  return [...pre, { count: cur }];
}, []);

sum.push({ count: 6 });

console.log(sum);

// 这段代码, 编译成.js后, 其实是可以运行的. 但如果装了插件, 可以看到明显的TS语法错误..
// 输出值
// [
//   { count: 0 },
//   { count: 1 },
//   { count: 2 },
//   { count: 3 },
//   { count: 4 },
//   { count: 5 },
//   { count: 6 }
// ]

(pre, cur)=>{} 会提示没有对应的重载类型. 原因不复杂, 就是类型不符合推导预期, 但为什么不符合预期, 还真没仔细看过. 本着fixbug可以, 但不能一无所获的思想, 查看了对应的TS类型声明

// 3种reduce的类型声明
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;

reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
 
reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;

很明显, reduce对类型的推导, 基本就是, 「参数类型」和「返回值类型」相同、且reduce前后, 只有一种类型, 那不用加「泛型」

但是, 如果出现1种以上的类型, 且preValue与initValue、returnType类型不同, 就必须显式标注类型.

案例中, pre的类型为never[], cur的类型是number, 而reduce的返回值类型是Array<{ count: number }>. 根据之前推导的结论, 出现3种类型, 且pre与cur、return值类型不同, 必须显式声明类型.

根据TS的类型声明, 有2种可用的解决方法: