第那些項目中常見的TypeScript錯誤總結(jié)目錄引言1.TS24562.TS25543.TS11694.TS23455.TS25896.TS2322總結(jié)

引言

TypeScript錯誤信息由錯誤碼和詳細信息組成。例如：TS2456，其中錯誤碼是以TS開頭+數(shù)字(一般是4位數(shù)字)結(jié)尾這樣的格式組成的字符串，用來作為特定類型錯誤的專屬代號。下面我們看一下那些常?，但在官方文檔甚少提及的類型錯誤：

1.TS2456

首先是由于類型別名循環(huán)引用了自身造成的TS2456類型錯誤，如下示例：

typeT=ReadonlyT

//TS2456:Typealias'T'circularlyreferencesitself.

在上面這個例子中，對于T這個類型別名，如果TypeScript編譯器想知道T類型是什么，就需要展開類型別名賦值的Readonly。而為了確定Readonly的類型，TypeScript編譯器需要繼續(xù)判斷入?yún)的類型，這就形成了一個循環(huán)引用，類似函數(shù)循環(huán)調(diào)用自己，如果沒有正確的終止條件，就會一直處于無限循環(huán)的狀態(tài)，所以就會報錯。

2.TS2554

另一個常?的錯誤就是TS2554，它是由于形參和實參個數(shù)不匹配造成的，如下:

functiontest(a:number|undefined):string{

if(a===undefined){

return'';

returna.toString();

test();//TS2554:Expected1arguments,butgot0.

test(undefined);

之所以會報錯是因為在ts中，undefined是一個特殊的類型，由于類型為undefined，并不代表可缺省，因此示例中的第8行提示了TS2554錯誤。

3.TS1169

TS1169類型錯誤是在接口類型定義中由于使用了非字面量或者非唯一symbol類型作為屬性名造成的，如下:

interfaceObj{

[keyin'id'|'name']:any;//TS1169:Acomputedpropertynameinaninterfacemustrefertoanexpressionwhosetypeisaliteraltypeora'uniquesymbol'type.

因為interface類型的屬性必須是字面量類型(string、number)或者是uniquesymbol類型，所以在第2行提示了TS1169錯誤。

4.TS2345

TS2345類型錯誤的原因在于傳參時由于類型不兼容造成的，如下：

enumA{

x='x',

y='y',

z='z',

enumB{

x='x',

y='y',

z='z',

functionfn(val:A){}

fn(B.x);//TS2345:Argumentoftype'B.x'isnotassignabletoparameteroftype'A'.;

如上所示，函數(shù)fn參數(shù)的val類型是枚舉A，在12行我們傳入了與枚舉A類似的枚舉B的值，此時ts提示了類型不匹配的錯誤。這是因為枚舉是在運行時真正存在的對象，因此ts并不會判斷兩個枚舉是否可以互相兼容，所以報錯。解決這個錯誤的方式也很簡單，我們只需要讓這兩個枚舉類型互相兼容就行，比如使用類型斷言繞過ts的類型檢查(fn((B.xasunknown)asA);)即可。

5.TS2589

TS2589類型錯誤是由泛型實例化遞歸嵌套過深造成的，如下:

typeRepeatXNextendsnumber,Textendsany[]=[]=T['length']extendsNT:RepeatXN,[...T,'X']

typeT1=RepeatX5//=["X","X","X","X","X"]

//TS2589:Typeinstantiationisexcessivelydeepandpossiblyinfinite.

因為第1行的泛型RepeatX接收了一個數(shù)字類型入?yún)，并返回了一個?度為N、元素都是X的數(shù)組類型，所以第4行的類型T1包含了5個X的數(shù)組類型;但是第6行的類型T2的類型卻是any，并且提示了TS2589類型錯誤。這是因為ts在處理遞歸類型的時候，最多實例化50層，如果超出了遞歸層數(shù)的限制，ts便不會繼續(xù)實例化，并且類型會變?yōu)閠op類型any。對于上面的錯誤，我們使用@ts-ignore注釋忽略即可。

6.TS2322

TS2322錯誤是由于字符串字面量類型定義時導(dǎo)致的錯誤，如下：

interfaceCSSProperties{

display:'block'|'flex'|'grid';

conststyle={

display:'flex',

//TS2322:Type'{display:string;}'isnotassignabletotype'CSSProperties'.

//Typesofproperty'display'areincompatible.

//Type'string'isnotassignabletotype'"block"|"flex"|"grid"'.

constcssStyle:CSSProperties=style;

在上面的例子中，CSSProperties的display屬性的類型是字符串字面量類型block|flex|grid，雖然變量style的display屬性看起來與CSSProperties類型完全兼容，但是TypeScript提示了TS2322類型不兼容的錯誤。這是因為變量style的類型被自動推斷成了{display:string}，string類型自然無法兼容字符串字面量類型block|