起因
一個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沒裝插件么?
本文來自博客園，作者：林十二XII
轉載請注明原文鏈接：https://www.cnblogs.com/lin-xii/p/ts-zhong-arrayreduce-ti-shi-mei-you-yu-ci-diao-yon.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/555406.html
標籤：其他
上一篇：Custom directive is missing corresponding SSR transform and will be ignored
下一篇：返回列表