项目中常见的TypeScript错误汇总

新钛云服已为您服务1431天

TypeScript 错误信息由错误码和详细信息组成。例如：TS2456 ，其中错误码是以“TS”开头 + 数字(一般是 4 位数字)结尾这样的格式组成的字符串，用来作为特定类型错误的专属代号。

下面我们看一下那些常⻅，但在官方文档甚少提及的类型错误：

一、TS2456

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

type T = Readonly < T >;

// TS2456: Type alias 'T' circularly references itself.

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

二、TS2554

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

functiontest (a : number |undefined) : string {

if(a ===undefined) {

return'' ;

returna . toString () ;

test () ; // TS2554: Expected 1 arguments, but got 0.

test (undefined) ;

之所以会报错是因为在 ts 中，undefined 是一个特殊的类型，由于类型为 undefined，并不代表可 缺省，因此示例中的第 8 行提示了 TS2554 错误。

三、TS1169

TS1169 类型错误是在接口类型定义中由于使用了非字面量或者非唯一 symbol 类型作为属性名造成 的，如下:

interfaceObj {

[keyin'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.

因为interface 类型的属性必须是字面量类型(string、number) 或者是 unique symbol 类型，所以 在第 2 行提示了 TS1169 错误。

四、TS2345

TS2345 类型错误的原因在于传参时由于类型不兼容造成的，如下：

enumA {

x = 'x' ,

y = 'y' ,

z = 'z' ,

enumB {

x = 'x' ,

y = 'y' ,

z = 'z' ,

functionfn (val : A) {}

fn (B . x ) ; // TS2345: Argument of type 'B.x' is not assignable to parameter of type 'A'. ;

如上所示，函数 fn 参数的 val 类型是枚举 A，在 12 行我们传入了与枚举 A 类似的枚举 B 的值，此时 ts 提示了类型不匹配的错误。这是因为枚举是在运行时真正存在的对象，因此 ts 并不会判断两个枚举是否可以互相兼容，所以报错。解决这个错误的方式也很简单，我们只需要让这两个枚举类型互相兼容就行，比如使用类型断言绕过 ts 的类型检查（fn((B.x as unknown) as A);）即可。

五、TS2589

TS2589 类型错误是由泛型实例化递归嵌套过深造成的，如下:

t ype RepeatX < Nextendsnumber , Textendsany[] = [] > = T[ 'length' ]extendsN ? T : RepeatX < N , [ ... T , 'X' ] >;

type T1 = RepeatX < 5 >; // => ["X", "X", "X", "X", "X"]

// TS2589: Type instantiation is excessively deep and possibly infinite.

因为第 1 行的泛型 RepeatX 接收了一个数字类型入参 N，并返回了一个⻓度为 N、元素都是 'X' 的数组类型，所以第 4 行的类型 T1 包含了 5 个 "X" 的数组类型;但是第 6 行的类型 T2 的类型却是 any，并且提 示了 TS2589 类型错误。这是因为 ts 在处理递归类型的时候，最多实例化 50 层，如果超出了递归层数的 限制，ts 便不会继续实例化，并且类型会变为 top 类型 any。

对于上面的错误，我们使用 @ts-ignore 注释忽略即可。

六、TS2322

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

interfaceCSSProperties {

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

conststyle = {

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

constcssStyle : CSSProperties = style ;

在上面的例子中，CSSProperties 的 display 属性的类型是字符串字面量类型 'block' | 'flex' | 'grid'，虽然变量 style 的 display 属性看起来与 CSSProperties 类型完全兼容，但是 TypeScript 提示了 TS2322 类型不兼容的错 误。这是因为变量 style 的类型被自动推断成了 { display: string }，string 类型自然无法兼容字符串字面量类型 'block' | 'flex' | 'grid'，所以变量 style 不能赋值给 cssStyle。

以上六种便是项目开发中比较常见的几种错误类型，如果你想查看所有的错误信息和错误码，可以浏览TypeScript 的源代码仓库，当然，随着 ts 版本的更新，官网也会逐渐增加更多新的类型错误。

了解新钛云服

往期技术干货