引言

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 '';
             }
  return a.toString();
}
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 并不会判断两个枚举是否可以互相兼容,所以报错。解决这个错误的方式也很简单,我们只需要让这两个枚举类型互相兼容就行,比如使用类型断言绕过 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错误内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

那些项目中常见的TypeScript错误总结的更多相关文章

  1. redirect_uri参数错误的解决方法(必看)

    下面小编就为大家带来一篇redirect_uri参数错误的解决方法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. 使用typescript类型实现ThreeSum

    这篇文章主要介绍了使用typescript类型实现ThreeSum,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以一下,希望对你学习又是帮助

  3.  typeScript入门基础介绍

    这篇文章主要介绍了 typeScript入门基础,TypeScript 是由微软开发的开源、跨平台的编程语言,是 javaScript 的超集,最终被编译为 javaScript代码。常常被简称为TS支持JS、ES语法,下文将继续其他基础介绍,需要的朋友可以参考一下

  4. typescript返回值类型和参数类型的具体使用

    本文主要介绍了typescript返回值类型和参数类型的具体使用文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. Nodejs Post请求报socket hang up错误的解决办法

    这篇文章主要介绍了Nodejs Post请求报socket hang up错误的解决办法,本文因少加了headers字段信息导致出现这个错误,本文给出了一个完整的实现代码,需要的朋友可以参考下

  6. Java中的StackOverflowError错误问题及解决方法

    这篇文章主要介绍了Java中的StackOverflowError错误,在本文中,我们仔细研究了StackOverflower错误,包括Java代码如何导致它,以及我们如何诊断和修复它,需要的朋友可以参考下

  7. Vue3 携手 TypeScript 搭建完整项目结构

    TypeScript 是JS的一个超级,主要提供了类型系统和对ES6的支持,使用 TypeScript 可以增加代码的可读性和可维护性,在 react 和 vue 社区中也越来越多人开始使用TypeScript,这篇文章主要介绍了Vue3 携手 TypeScript 搭建完整项目结构,需要的朋友可以参考下

  8. 关于TypeScript开发的6六个实用小技巧分享

    TypeScript是Javascrip t超集,支持静态类型检测,可以在编译期提前暴露问题,节省debug时间,下面这篇文章主要给大家介绍了关于TypeScript开发的6六个实用小技巧,需要的朋友可以参考下

  9. 使用vue-touch报priority错误的解决

    这篇文章主要介绍了使用vue-touch报priority错误的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  10. typescript+react实现移动端和PC端简单拖拽效果

    这篇文章主要为大家详细介绍了typescript+react实现移动端和PC端简单拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部