TS中Array.reduce提示沒有與此調用匹配的重載解析

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

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

起因

一個feature開發(fā), 結果需求評審、工時預估, 簡直是事故級別的. 最后, 迫于無奈, 全組人都得上去救火...

今天, 幫忙改bug的時候, 發(fā)現(xiàn)新checkout下來的代碼, 還帶著新鮮的語法錯誤...簡直大無語.

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

排查過程

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

// 業(yè)務代碼不方便外流, 簡單寫了個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對類型的推導, 基本就是, 「參數(shù)類型」和「返回值類型」相同、且reduce前后, 只有一種類型, 那不用加「泛型」

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

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

根據TS的類型聲明, 有2種可用的解決方法: