什么时候使用断言，断言的类型怎么判定

Question

老师，在做VUE项目的时候，store的每个模块的infos使用了索引签名interface {[index: string]: unknown}去定义，然后在vue文件中获取时使用了断言去解决TS的报错，想问下什么时候该用断言，和断言成什么类型，这个是怎么判定

Answer 1

西门老舅 2022-12-14 10:57:56

你好，

类型断言的定义：TypeScript 不知道具体类型 或者 TypeScript 记录的类型没有办法满足使用要求时，可以使用类型断言来明确指定为自己想要使用的类型。

在项目中因为后端响应的类型可能要经常变动，那么最好不给确定的类型，而是给索引签名，那么给unknown类型主要还是严谨一些，主要是跟any比。在使用unknown类型的时候就需要断言来明确是什么类型，有助于程序不写出错误。

当然断言的其他场景是很多的，举例如下：

1. 对于通过标签获取的DOM，TypeScript可以推断出类型，但是对于其他方式，TypeScript无法推断，我们可以使用类型断言来明确指定元素类型。

let div1 = document.querySelector('div')   // 自动推断出是 HTMLDivElement

let div2 = document.querySelector('#app') as HTMLDivElement    // 断言#app就是一个div类型

2.对于空对象占位，可以断言为特定类型，以获取正确的代码提示和类型推断。

let obj = {} as Obj;    // 保证 obj 有类型，而是还可以不添加初始值。

3. 类型断言可以把宽泛的类型转成比较具体的类型。

let foo: number|string = 'hello'

(foo as string).length

当然：慎用类型断言，除非你真的有把握。类型断言是一个编译时语法，不涉及运行时。

• 提问者 weixin_慕侠6348035 #1

  老师，还有一个问题就是，`HTMLDivElement`/`RouteRecordName`这种第三方定义好的，我怎么去知道定义了这些类型和什么时候该使用这个类型

• 西门老舅 回复 提问者 weixin_慕侠6348035 #2

  一般可以在使用的时候鼠标移入上去，可以看到很多变量或参数TS都已经自动推断好了，所以多观察着点，比如我举个例子，axios.post()
  (method) Axios.post<any, AxiosResponse<any, any>, any>(url: string, data?: any, config?: AxiosRequestConfig<any> | undefined): Promise<AxiosResponse<any, any>>
  应有 1-3 个参数，但获得 0 个。ts(2554)
  index.d.ts(445, 48): 未提供 "url" 的自变量。
  这里的类型非常的多。
  其次就是观察对应的d.ts文件，这里都是定义的类型
  或者说有一些框架或库，官网上都有详细的文档，比如vue-router路由：https://router.vuejs.org/zh/api/#typescript

• 提问者 weixin_慕侠6348035 回复 西门老舅 #3

  好的，谢谢老师