TS入门之类型断言

111 阅读2分钟

「这是我参与2022首次更文挑战的第19天,活动详情查看:2022首次更文挑战」。

前言

当我们定义了一个对象,试图给它赋值时,会发现TS给出了错误提示。

之前有说到过【类型推断】,定义user的时候它的类型被推断为{},而这个时候它并不存在新添加的这些属性,所以报错了。

image-20220217200639047

所以我们现在要处理的一个问题就是,我们知道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类型

image-20220217225504203

但是这也会有一个问题,当断言是Fish,使用了swim方法之后,这个时候传入的实际又是Cat,并没有swim方法,那么编译的时候不会报错,但是最后转换成js编译的时候会报错。

image-20220217230314985

什么时候使用类型断言?

当你确定你比TypeScript更了解某个值的详细信息时。通过类型断言这种方式告诉编译器,“相信我,我知道自己在干什么”。

注意!!

1、类型断言不要滥用,强制把某类型断言会造成 TypeScript 丧失代码提示的能力。

2、使用断言,简单来说就是先做好一个假设,使得编译通过。

3、类型断言更像是类型的选择,而不是类型转换。

参考资料:

类型断言

TS-基础类型-类型断言


🎨【点赞】【关注】不迷路,更多前端干货等你解锁

往期推荐

👉 TypeScript入门之预备知识

👉 TypeScript入门之基础知识

👉 TypeScript入门之进阶篇

👉 TypeScript入门之高级篇