TS中Array.reduce提示沒(méi)有與此調(diào)用匹配的重載解析

更新時(shí)間：2023年06月19日 10:28:48 作者：wlAlter

這篇文章主要為大家介紹了TS中Array.reduce提示沒(méi)有與此調(diào)用匹配的重載解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

起因

一個(gè)feature開(kāi)發(fā), 結(jié)果需求評(píng)審、工時(shí)預(yù)估, 簡(jiǎn)直是事故級(jí)別的. 最后, 迫于無(wú)奈, 全組人都得上去救火...

今天, 幫忙改bug的時(shí)候, 發(fā)現(xiàn)新checkout下來(lái)的代碼, 還帶著新鮮的語(yǔ)法錯(cuò)誤...簡(jiǎn)直大無(wú)語(yǔ).

翻了遍代碼, 發(fā)現(xiàn)很多地方都存在Array.reduce類(lèi)型重載相關(guān)的問(wèn)題, 簡(jiǎn)單記錄一下解決過(guò)程.

排查過(guò)程

大家的vscode都不裝語(yǔ)法提示插件么? 代碼掛著紅線, 就扔代碼庫(kù)了??? 抽時(shí)間, 得把hook安排上了??

// 業(yè)務(wù)代碼不方便外流, 簡(jiǎn)單寫(xiě)了個(gè)demo, 問(wèn)題原因相同
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后, 其實(shí)是可以運(yùn)行的. 但如果裝了插件, 可以看到明顯的TS語(yǔ)法錯(cuò)誤..
// 輸出值
// [
//   { count: 0 },
//   { count: 1 },
//   { count: 2 },
//   { count: 3 },
//   { count: 4 },
//   { count: 5 },
//   { count: 6 }
// ]

(pre, cur)=>{} 會(huì)提示沒(méi)有對(duì)應(yīng)的重載類(lèi)型. 原因不復(fù)雜, 就是類(lèi)型不符合推導(dǎo)預(yù)期, 但為什么不符合預(yù)期, 還真沒(méi)仔細(xì)看過(guò). 本著fixbug可以, 但不能一無(wú)所獲的思想, 查看了對(duì)應(yīng)的TS類(lèi)型聲明

// 3種reduce的類(lèi)型聲明
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對(duì)類(lèi)型的推導(dǎo), 基本就是, 「參數(shù)類(lèi)型」和「返回值類(lèi)型」相同、且reduce前后, 只有一種類(lèi)型, 那不用加「泛型」

但是, 如果出現(xiàn)1種以上的類(lèi)型, 且preValue與initValue、returnType類(lèi)型不同, 就必須顯式標(biāo)注類(lèi)型.

案例中, pre的類(lèi)型為never[], cur的類(lèi)型是number, 而reduce的返回值類(lèi)型是Array<{ count: number }>. 根據(jù)之前推導(dǎo)的結(jié)論, 出現(xiàn)3種類(lèi)型, 且pre與cur、return值類(lèi)型不同, 必須顯式聲明類(lèi)型.

根據(jù)TS的類(lèi)型聲明, 有2種可用的解決方法: