聊聊項(xiàng)目中常見的TypeScript錯(cuò)誤
TypeScript 錯(cuò)誤信息由錯(cuò)誤碼和詳細(xì)信息組成。例如:TS2456 ,其中錯(cuò)誤碼是以“TS”開頭 + 數(shù)字(一般是 4 位數(shù)字)結(jié)尾這樣的格式組成的字符串,用來作為特定類型錯(cuò)誤的專屬代號(hào)。下面我們看一下那些常?,但在官方文檔甚少提及的類型錯(cuò)誤:
1.TS2456
首先是由于類型別名循環(huán)引用了自身造成的 TS2456 類型錯(cuò)誤,如下示例:
type T = Readonly<T>;
// TS2456: Type alias 'T' circularly references itself.
在上面這個(gè)例子中,對(duì)于 T 這個(gè)類型別名,如果 TypeScript 編譯器想知道 T 類型是什么,就需要展開類型別名賦值的 Readonly 。而為了確定 Readonly 的類型,TypeScript 編譯器需要繼續(xù)判斷入?yún)?T 的類型,這就形成了一個(gè)循環(huán)引用,類似函數(shù)循環(huán)調(diào)用自己,如果沒有正確的終止條件,就會(huì)一直處于無限循環(huán)的狀態(tài),所以就會(huì)報(bào)錯(cuò)。
2.TS2554
另一個(gè)常?的錯(cuò)誤就是TS2554,它是由于形參和實(shí)參個(gè)數(shù)不匹配造成的,如下:
function test(a: number | undefined): string {
if (a=== undefined) {
return '';
}
return a.toString();
}
test(); // TS2554: Expected 1 arguments, but got 0.
test(undefined);
之所以會(huì)報(bào)錯(cuò)是因?yàn)樵?ts 中,undefined 是一個(gè)特殊的類型,由于類型為 undefined,并不代表可 缺省,因此示例中的第 8 行提示了 TS2554 錯(cuò)誤。
3.TS1169
TS1169 類型錯(cuò)誤是在接口類型定義中由于使用了非字面量或者非唯一 symbol 類型作為屬性名造成 的,如下:
interface Obj {
[key in 'id' | 'name']: any; // TS1169: A computed property name in an interface must refer to an expression whose type is a literal type or a 'unique symbol' type.
};
因?yàn)閕nterface 類型的屬性必須是字面量類型(string、number) 或者是 unique symbol 類型,所以 在第 2 行提示了 TS1169 錯(cuò)誤。
4.TS2345
TS2345 類型錯(cuò)誤的原因在于傳參時(shí)由于類型不兼容造成的,如下:
enum A {
x = 'x',
y = 'y',
z = 'z',
}
enum B {
x = 'x',
y = 'y',
z = 'z',
}
function fn(val: A) {}
fn(B.x); // TS2345: Argument of type 'B.x' is not assignable to parameter of type 'A'. ;
如上所示,函數(shù) fn 參數(shù)的 val 類型是枚舉 A,在 12 行我們傳入了與枚舉 A 類似的枚舉 B 的值,此時(shí) ts 提示了類型不匹配的錯(cuò)誤。這是因?yàn)槊杜e是在運(yùn)行時(shí)真正存在的對(duì)象,因此 ts 并不會(huì)判斷兩個(gè)枚舉是否可以互相兼容,所以報(bào)錯(cuò)。解決這個(gè)錯(cuò)誤的方式也很簡(jiǎn)單,我們只需要讓這兩個(gè)枚舉類型互相兼容就行,比如使用類型斷言繞過 ts 的類型檢查(fn((B.x as unknown) as A);)即可。
5.TS2589
TS2589 類型錯(cuò)誤是由泛型實(shí)例化遞歸嵌套過深造成的,如下:
type RepeatX<N extends number, T extends any[] = []> = T['length'] extends N?T: RepeatX<N, [...T, 'X']>;
type T1 = RepeatX<5>; // => ["X", "X", "X", "X", "X"]
// TS2589: Type instantiation is excessively deep and possibly infinite.
因?yàn)榈?1 行的泛型 RepeatX 接收了一個(gè)數(shù)字類型入?yún)?N,并返回了一個(gè)?度為 N、元素都是 'X' 的數(shù)組類型,所以第 4 行的類型 T1 包含了 5 個(gè) "X" 的數(shù)組類型;但是第 6 行的類型 T2 的類型卻是 any,并且提 示了 TS2589 類型錯(cuò)誤。這是因?yàn)?ts 在處理遞歸類型的時(shí)候,最多實(shí)例化 50 層,如果超出了遞歸層數(shù)的 限制,ts 便不會(huì)繼續(xù)實(shí)例化,并且類型會(huì)變?yōu)?top 類型 any。 對(duì)于上面的錯(cuò)誤,我們使用 @ts-ignore 注釋忽略即可。
6.TS2322
TS2322 錯(cuò)誤是由于字符串字面量類型定義時(shí)導(dǎo)致的錯(cuò)誤,如下:
interface CSSProperties {
display: 'block' | 'flex' | 'grid';
}
const style = {
display: 'flex',
};
// TS2322: Type '{ display: string; }' is not assignable to type 'CSSProperties'.
// Types of property 'display' are incompatible.
// Type 'string' is not assignable to type '"block" | "flex" | "grid"'.
const cssStyle: CSSProperties = style;
在上面的例子中,CSSProperties 的 display 屬性的類型是字符串字面量類型 'block' | 'flex' | 'grid',雖然變量 style 的 display 屬性看起來與 CSSProperties 類型完全兼容,但是 TypeScript 提示了 TS2322 類型不兼容的錯(cuò) 誤。這是因?yàn)樽兞?style 的類型被自動(dòng)推斷成了 { display: string },string 類型自然無法兼容字符串字面量類型 'block' | 'flex' | 'grid',所以變量 style 不能賦值給 cssStyle。
以上六種便是項(xiàng)目開發(fā)中比較常見的幾種錯(cuò)誤類型,如果你想查看所有的錯(cuò)誤信息和錯(cuò)誤碼,可以瀏覽TypeScript 的源代碼倉(cāng)庫(kù),當(dāng)然,隨著 ts 版本的更新,官網(wǎng)也會(huì)逐漸增加更多新的類型錯(cuò)誤。