那些项⽬中常见的TypeScript错误总结
⽬录
引⾔
1.TS2456
2.TS2554
3.TS1169
4.TS2345
5.TS2589
6.TS2322
总结
引⾔
TypeScript 错误信息由错误码和详细信息组成。例如：TS2456 ，其中错误码是以“TS”开头 + 数字(⼀般是 4 位数字)结尾这样的格式组成的字符串，⽤来作为特定类型错误的专属代号。下⾯我们看⼀下那些常⻅，但在官⽅⽂档甚少提及的类型错误：
1.TS2456
⾸先是由于类型别名循环引⽤了⾃⾝造成的 TS2456 类型错误，如下⽰例：
type T = Readonly<T>;
// TS2456: Type alias 'T' circularly references itself.
在上⾯这个例⼦中，对于 T 这个类型别名，如果 TypeScript 编译器想知道 T 类型是什么，就需要展开类型别名赋值的 Readonly 。
⽽为了确定 Readonly 的类型，TypeScript 编译器需要继续判断⼊参 T 的类型，这就形成了⼀个循环引⽤，类似函数循环调⽤⾃⼰，如果没有正确的终⽌条件，就会⼀直处于⽆限循环的状态，所以就会报错。
2.TS2554
另⼀个常⻅的错误就是TS2554，它是由于形参和实参个数不匹配造成的，如下:
function test(a: number | undefined): string {
if (a=== undefined) {
return '';
}
String();
}
test(); // TS2554: Expected 1 arguments, but got 0.
test(undefined);
之所以会报错是因为在 ts 中，undefined 是⼀个特殊的类型，由于类型为 undefined，并不代表可缺省，因此⽰例中的第 8 ⾏提⽰了TS2554 错误。
3.TS1169
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. };
因为interface 类型的属性必须是字⾯量类型(string、number) 或者是 unique symbol 类型，所以在第 2 ⾏提⽰了 TS1169 错误。
4.TS2345
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'.    ;
如上所⽰，函数 fn 参数的 val 类型是枚举 A，在 12 ⾏我们传⼊了与枚举 A 类似的枚举 B 的值，此时 ts 提⽰了类型不匹配的错误。这是因为枚举是在运⾏时真正存在的对象，因此 ts 并不会判断两个枚举是否可以互相兼容，所以报错。解决这个错误的⽅式也很简单，我们只需要让这两个枚举类型互相兼容就⾏，typescript 字符串转数组
⽐如使⽤类型断⾔绕过 ts 的类型检查(fn((B.x as unknown) as A);)即可。
5.TS2589
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.
因为第 1 ⾏的泛型 RepeatX 接收了⼀个数字类型⼊参 N，并返回了⼀个⻓度为 N、元素都是 'X' 的数组类型，所以第 4 ⾏的类型 T1包含了 5 个 "X" 的数组类型；但是第 6 ⾏的类型 T2 的类型却是 any，并且提⽰了 TS2589 类型错误。这是因为 ts 在处理递归类型的时候，最多实例化 50 层，如果超出了递归层数的限制，ts 便不会继续实例化，并且类型会变为 top 类型 any。对于上⾯的错误，我们使⽤ @ts-ignore 注释忽略即可。
6.TS2322
TS2322 错误是由于字符串字⾯量类型定义时导致的错误，如下：
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 类型不兼容的错误。这是因为变量 style 的类型被⾃动推断成了 { display: string }，string 类型⾃然⽆法兼容字符串字⾯量类型 'block' | 'flex' | 'grid'，所以变量 style 不能赋值给 cssStyle。
以上六种便是项⽬开发中⽐较常见的⼏种错误类型，如果你想查看所有的错误信息和错误码，可以浏览TypeScript 的源代码仓库，当然，随着 ts 版本的更新，官⽹也会逐渐增加更多新的类型错误。
总结
到此这篇关于常见的TypeScript错误总结的⽂章就介绍到这了，更多相关常见的TypeScript错误内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。