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种可用的解决方法:
- 给initValue增加类型断言,
[] as Array<{ count: number }>. - 在reduce处, 声明泛型类型
nums.reduce<Array<{ count: number }>>
核心解决思路: 减少TSC推导类型的种类, 促使其符合已存在的类型定义.
吐槽
只要思想不滑坡, 办法总比困难多
问题很直观, 也不复杂. 但看log, 这语法问题已经存在2个月了, 真的是vscode没装插件么?
以上就是TS中Array.reduce提示没有与此调用匹配的重载解析的详细内容，更多关于TS Array.reduce重载匹配的资料请关注脚本之家其它相关文章！
相关文章
laytpl是一款颠覆性的JavaScript模板引擎，它用巧妙的实现方式，将自身的体积变得小巧玲珑，不仅性能接近极致，并且还具备传统前端引擎的几乎所有功能2014-08-08
这篇文章主要为大家介绍了TypeScript 中 as const使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要为大家介绍了TypeScript类型实现加减乘除示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
layui中的layer弹出层有很多提示框，但是我们使用最多的应该就几种，layer.msg、layer.alert、layer.open、layer.load等。layer 有内置的skin：layui-layer-lan，layui-layer-molv，可以直接使用。skin不仅允许你传入layer内置的样式class名，可以自定义class名。2023-06-06
本文给大家介绍基于Javascript实现页面商品个数增减功能，通过点击数量增减个数，代码分为前端页面，后台返回代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2019-07-07
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充2017-03-03
Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单2015-05-05
联合类型Union Types与交叉类型Intersection Types区别解析
这篇文章主要为大家介绍了联合类型Union Types与交叉类型Intersection Types区别详解2023-06-06
页面需要加载多个js文件时，加载时浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；由于js文件之间存在依赖关系，必须严格保证加载顺序，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。这种情况下require.js插件应运而生。2022-12-12
typescript封装消息提示框插件ew-message使用实战
这篇文章主要为大家介绍了typescript封装消息提示框插件ew-message使用实战,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
最新评论