# 类型断言

类型断言

参考资料:ts.xcatliu.com/basics/type...

类型断言(Type Assertion)可以用来手动指定一个值的类型。

案例

比如说我们有一个案例:定义一个函数,获取到一个数组或者字符串的长度

OK,接下来编写代码:

javascript 复制代码
// 定义一个函数,获取到一个数组或者字符串的长度
function getLength(x: string | number): number {
  return x.length
}

这样子就是先了这个功能,但是会有一个问题,就是,.length 方法是字符串特有的,对于数字来说,没有这个方法,因此在传入数字的时候,会报错,所以 ts 不允许这样写,会报错。

也就是说,如果使用联合声明的话,里面的结构体只能使用两个声明类型的共有方法,字符串和数字共有的一个方法是 .toString() 方法转为字符串,所以说我们可以使用一下:

javascript 复制代码
// 定义一个函数,获取到一个数组或者字符串的长度
function getLength(x: string | number): number {
  return x.toString().length
}

这样就是可以的了,不会引发 ts 校验错误问题:

所以我们可以测试一下子,编译完成执行一下操作,是不会有问题的。

javascript 复制代码
// 定义一个函数,获取到一个数组或者字符串的长度

function getLength(x: string | number): number {
  return x.toString().length
}
console.log(getLength("123456"));
console.log(getLength(123456));

看一下结果:

没有任何问题!

还有一个解决办法,就是我们先判断传进来的数据有没有 .length 方法,如果有就返回 .length,如果没有在调用 .toString() 方法再返回。

javascript 复制代码
function getLength(x: string | number): number {
  if (x.length) {
    return x.length
  } else {
    return x.toString().length
  }
}

但是我们发现,其实也是不行的,和上面的问题一样,就是 .length 的时候,他不敢保证你穿进来的参数就是有的,所以语法校验直接不通过。

这个时候我们就需要使用今天要说的 类型断言,手动指定一个类型。

类型断言

类型断言有两种方法:

  • 变量 as 类型
  • <类型>变量

注意:在 tsx 语法(React 的 jsx 语法的 ts 版)中必须使用前者,即 值 as 类型。

我们用变量 as 类型这个方法修改一下上面案例代码,指定一下内容:

看,我们在第一个地方指定了之后,已经不会报错了,但是后面没有指定的地方依旧在报错。

好,下面我们使用<类型>变量的方式断言后面的内容:

这样我们就使用断言,指定了参数的类型。

将任何一个类型断言为 any 类型

现在,我们想在 window 上面添加一个 a 属性赋值为10

javascript 复制代码
window.a = 10

理论上这样写是没有问题的,但是我们看 ts 的处理结果。

他给我们报错了。他说 window 上面没有 a 属性,确实哈,确实没有,但是老子写的代码老子不晓得嘛!老子今天就是想给 window 上添加一个 a 属性的!凭啥不让老子添加!

不让添加没办法,我们就给 window 断言成 any 类型:

javascript 复制代码
(window as any).a = 10

好的,不报错了:

因为 any 类型是允许我们访问任何属性和方法的!所以有没有这个属性,有没有这个方法它不晓得,都让添加和操作,当然这是 any 类型的优点,相当灵活,确实也是他的一个缺点,太灵活,没有制约了。

注意一点:将一个变量断言为 any 可以说是解决 TypeScript 中类型问题的最后一个手段。它极有可能掩盖了真正的类型错误,所以如果不是非常确定,就不要使用 as any

总之,一方面不能滥用 as any,另一方面也不要完全否定它的作用,我们需要在类型的严格性和开发的便利性之间掌握平衡(这也是 TypeScript 的设计理念之一),才能发挥出 TypeScript 最大的价值。

有一句话说得好:如果老是用 any 的话,我还用 ts 干什么!直接 js 走起啊! 啊哈哈哈哈,很有道理!

将 any 断言为一个具体类型

比如下面我有一段代码,存在一个函数,函数的目的是两参数相加,返回相加结果,但是传入的参数包括返回值都是 any 类型:

javascript 复制代码
function abc(x:any, y:any):any {
  return x + y
}
let a = abc(1, 2)

你看哈,我们调用方法传进去的参数都是数值类型,那我们想返回的数据也就是得到的 a 也是数值类型,那么我们可以添加断言,规定返回我数值类型的返回值,也就是返回我确定的类型:

javascript 复制代码
function abc(x:any, y:any):any {
  return x + y
}
let a = abc(1, 2) as number

这时候把鼠标一上去,发现 a 的类型变成 number 类型了。

如果想得到字符串,我们可以断言成字符串类型,毕竟我们已经确认我们传进去的是啥类型里:

javascript 复制代码
function abc(x:any, y:any):any {
  return x + y
}
let a = abc(1, 2) as number
let b = abc("1", "2") as string

OK,就是这个样子。

相关推荐
喵叔哟19 分钟前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特1 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解1 小时前
【深度解析】CSS工程化全攻略(1)
前端·css
一只小白菜~1 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS(跨域资源共享):原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
Mr.咕咕1 小时前
Django 搭建数据管理web——商品管理
前端·python·django