前言🎉
- 虽然之前有学过
TypeScript
但是平时业务上面都还是用JavaScript
来开发导致逐渐对TypeScript
生疏了。 - 借此更文活动的机会再来一起学习一下
TypeScript
的知识吧。 - 本文也是
TypeScript
基础篇的最后一篇,接下来会分享一下进阶篇的知识。
类型断言🌭
- 类型断言可以用来手动指定一个值的类型。
- 类型断言一般使用
as
来连接,即值as
类型。
断言为联合类型中的一个类型🥙
- 我们一般在什么时候需要使用到断言呢?我们之前联合类型提到:
let someThing: string | number; someThing = 'lwj'; someThing = 5201314; console.log(someThing.length) //报错 复制代码
- 在上面的代码中最后的
someThing.length
是执行不了的,因为TypeScrip
实际上是'不确定'
该值什么时候是什么类型的,所以会报错,这时候我们可以使用类型断言。
interface Student { name: string; speak(): string; } interface Teacher { name: string; talk(): string; } function isTeacher(people: Student | Teacher) { people.talk() //报错 (people as Teacher).talk() //不报错 return false; } 复制代码
- 像上面定义了两个接口分别有相同的属性和不同的方法,当我们执行
people.talk()
的时候其实TypeScrip
不知道该值是属于Student
还是Teacher
的,所以他自然而然会报错,但是当我们使用了类型断言后,这样相当于就是告诉TypeScrip
这个people
就是Teacher
类型,自然而然也不会报错了。 - 但是使用类型断言也会有不好的地方,就比如
interface Student { name: string; speak(): void; } interface Teacher { name: string; talk(): void; } function isTeacher(people: Student | Teacher) { (people as Teacher).talk() //不报错 return false; } const man:Student={ name:'lwj', speak(){console.log('编译器不报错')} } isTeacher(man) //运行时报错 复制代码
- 在上面这个例子中我们给
isTeacher
函数传入了一个man
对象,这个对象没有talk
方法,但是当我们运行isTeacher
时我们断言了这个参数是Teacher
类型,也就是我们断言了这个参数会有talk
方法,所以编译器相信了我们不报错,但是事实上man
对象是没有talk
方法的所以最后转换成js
编译的时候会报错。
断言为任意(any)🥘
- 在
TypeScript
中我们一般用对象.
属性或方法
来获取属性或者执行方法。 - 我们在
JavaScript
中也可以直接使用对象.
属性或方法
来新增一个属性或方法,但这样的操作在TypeScript
是不允许的。
网络异常,图片无法展示
|
- 如上图所示我们想给
window
对象新增一个num
属性值为1
,这样会报错,所以我们可以将window
断言为any
。
(window as any).num = 1; //不报错 复制代码
- 即使断言可以这样时候,但是这也是我们迫不得已实在没办法了才用的,我们既然使用了
TypeScript
就要用严格的类型规范来规范我们的项目。
类型断言的限制🌮
TypeScript
是结构类型系统,类型之间的对比只会比较它们最终的结构,而会忽略它们定义时的关系。- 在
TypeScript
中并不是所有类型都可以断言为另一个类型,类型要可以断言必须满足一个条件兼容
。 兼容
说起来也不是特别难理解。
interface Student { name: string; } interface Teacher { name: string; talk(): void; } function testpeople(teacher: Teacher) { return (teacher as Student); } function people(student: Student) { return (student as Teacher); } 复制代码
- 在上面的代码中第一个
teacher as Student
不会报错是因为Teacher
其实可以理解为是继承了Student
的属性然后新增了一个talk()
,所以在这程度上Teacher
是兼容Student
的。 - 而第二个
student as Teacher
不会报错是因为Teacher
拥有所有Student
的属性和方法,就比如他拥有了name
属性,所以在这程度上Student
是兼容Teacher
的。 - 所以我们在判断两个类型是否兼容的时候只需要看到一个类型的属性和方法在另一个类型里面是不是都有,如果是那么他们就是兼容的,就可以使用断言。
写在最后👋
- 本文也算是记录一下
TypeScript
的学习,接下来我会持续输出TypeScript
相关的知识,大家可以一起来学习。 - 如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛