「这是我参与2022首次更文挑战的第19天,活动详情查看:2022首次更文挑战」。
前言
当我们定义了一个对象,试图给它赋值时,会发现TS给出了错误提示。
之前有说到过【类型推断】,定义user的时候它的类型被推断为{},而这个时候它并不存在新添加的这些属性,所以报错了。
所以我们现在要处理的一个问题就是,我们知道name属性和age属性是存在的,那么我们也应该让TypeScript知道,这个时候可以用【类型断言】来处理。
基本使用
类型断言(Type Assertion)可以用来手动指定一个值的类型。它有两种写法
1、值 as 类型
-
推荐
-
在 tsx 语法(React 的 jsx 语法的 ts 版)中必须使用
2、<类型>值
- 不推荐,这种容易和泛型搞混
interface User {
name: string;
age: number;
}
const user = {} as User;
user.name = 'Jin';
user.age = 18;
在联合类型中的使用
当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型中共有的属性或方法
如以下示例,animal 可能是 Cat ,也可能是Fish。假如你明确知道它就是Fish,所以想用swim方法,此时可以使用类型断言,将 animal 断言成 Fish
使用了类型断言后,这样相当于就是告诉
TypeScrip这个animal就是Fish类型
但是这也会有一个问题,当断言是Fish,使用了swim方法之后,这个时候传入的实际又是Cat,并没有swim方法,那么编译的时候不会报错,但是最后转换成js编译的时候会报错。
什么时候使用类型断言?
当你确定你比TypeScript更了解某个值的详细信息时。通过类型断言这种方式告诉编译器,“相信我,我知道自己在干什么”。
注意!!
1、类型断言不要滥用,强制把某类型断言会造成 TypeScript 丧失代码提示的能力。
2、使用断言,简单来说就是先做好一个假设,使得编译通过。
3、类型断言更像是类型的选择,而不是类型转换。
参考资料:
🎨【点赞】【关注】不迷路,更多前端干货等你解锁
往期推荐