那些项目中常见的TypeScript错误总结

第那些项目中常见的TypeScript错误总结目录引言1.TS24562.TS25543.TS11694.TS23455.TS25896.TS2322总结

引言

TypeScript错误信息由错误码和详细信息组成。例如：TS2456，其中错误码是以TS开头+数字(一般是4位数字)结尾这样的格式组成的字符串，用来作为特定类型错误的专属代号。下面我们看一下那些常⻅，但在官方文档甚少提及的类型错误：

1.TS2456

首先是由于类型别名循环引用了自身造成的TS2456类型错误，如下示例：

typeT=ReadonlyT

//TS2456:Typealias'T'circularlyreferencesitself.

在上面这个例子中，对于T这个类型别名，如果TypeScript编译器想知道T类型是什么，就需要展开类型别名赋值的Readonly。而为了确定Readonly的类型，TypeScript编译器需要继续判断入参T的类型，这就形成了一个循环引用，类似函数循环调用自己，如果没有正确的终止条件，就会一直处于无限循环的状态，所以就会报错。

2.TS2554

另一个常⻅的错误就是TS2554，它是由于形参和实参个数不匹配造成的，如下:

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'.;

如上所示，函数fn参数的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接收了一个数字类型入参N，并返回了一个⻓度为N、元素都是X的数组类型，所以第4行的类型T1包含了5个X的数组类型;但是第6行的类型T2的类型却是any，并且提示了TS2589类型错误。这是因为ts在处理递归类型的时候，最多实例化50层，如果超出了递归层数的限制，ts便不会继续实例化，并且类型会变为top类型any。对于上面的错误，我们使用@ts-ignore注释忽略即可。

6.TS2322

TS2322错误是由于字符串字面量类型定义时导致的错误，如下：

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|