TypeScript 报错的原因及解决方法是什么？-HCRM博客

TypeScript（简称 TS）是 JavaScript 的一个超集，它扩展了 JavaScript 的语法，添加了静态类型检查等特性，在开发过程中，TypeScript 报错是常见的现象，这些错误通常与类型不匹配、语法错误或配置问题有关，下面将详细分析 TypeScript 报错的类型、原因以及解决方法：

常见 TypeScript 报错及解决方法

（图片来源网络，侵权删除）

1、TS2456

错误描述：由于类型别名循环引用自身造成的错误。

示例代码：

     type T = Readonly<T>;

解决方法：避免类型别名的循环引用，重新设计类型定义。

2、TS2554

错误描述：形参和实参个数不匹配。

（图片来源网络，侵权删除）

示例代码：

     function test(a: number | undefined): string {
       if (a === undefined) {
         return '';
       }
       return a.toString();
     }
     test(); // TS2554: Expected 1 arguments, but got 0.

解决方法：确保函数调用时传递正确数量的参数。

3、TS1169

错误描述：接口类型定义中使用了非字面量或非唯一 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.
     };

解决方法：使用字面量类型或唯一 symbol 类型作为属性名。

（图片来源网络，侵权删除）

4、TS2345

错误描述：传参时由于类型不兼容造成的错误。

示例代码：

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

解决方法：确保参数类型与函数签名匹配，或使用类型断言绕过类型检查。

5、TS2589

错误描述：泛型实例化递归嵌套过深造成的错误。

示例代码：

     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.

解决方法：限制递归深度，或使用 @tsignore 注释忽略错误。

6、TS2322

错误描述：字符串字面量类型定义时导致的错误。

示例代码：

     interface CSSProperties {
       display: 'block' | 'flex' | 'grid';
     }
     const style = {
       display: 'flex',
     };
     const cssStyle: CSSProperties = style; // TS2322: Type '{ display: string; }' is not assignable to type 'CSSProperties'.

解决方法：确保变量类型与接口定义匹配。

解决 VSCode 中 js 文件报 ts 错误的具体方法

1、启用 TypeScript 校验：在 VSCode 设置中搜索validate，找到Tyscript>Validate 选项并勾选，然后重启 VSCode。

2、安装类型声明：对于缺少类型声明的第三方库，可以通过安装类型声明库或使用declare module 语法来解决。

3、关闭隐式 any 检查：如果项目中存在隐式 any 类型，可以选择关闭隐式 any 检查，但这通常不推荐。

4、配置 eslint：使用 eslint 插件来规范代码风格和进行语法检查，及时发现低级语法错误。