TypeScript -类型断言的简单理解

类型断言是干啥的

类型断言 : 是手动的给某个变量 指定类型,从而可以方便操作该类型的属性和方法。

类型断言的两种写法

方式一 : 变量名 as 类型

ts 复制代码
let x: number | string = 'abc';
console.log((x as string).length); // 输出 3 ,因为是个字符串

方式二 :<类型> 变量名

ts 复制代码
let x: number | string = 'abc';
console.log((<string>x).length); // 输出 3 ,因为是个字符串

类型断言的理解误区

注意 :

1、类型断言只是为了方便明确变量的类型,而不是将变量的类型进行改变!!!

2、因此,类型断言在使用的时候,建议 在我们已经明确知道变量是什么类型的时候使用,

这样才能够真正发挥类型断言的作用。

例如 :

ts 复制代码
let x:number = 123;
// 这样写,ts 并不会报错,
//但是 实际上并不会将 x 真正的转为string 类型,最终的输出结果是 undefined
console.log((<string>x).length)

举个例子理解一下

ts 复制代码
// 定义一个函数
function m1(x : string  | number){
    console.log((x as string).length)
}

// 分别用不同类型的数据参数调用一下函数
m1(1234567890); // undefined
m1('1234567890'); // 10

结果分析:

1、函数的作用是 : 输出字符串参数的长度

2、第一次调用的参数是数值类型,没有 length 属性,因此输出 undefined

3、第二次调用的参数是字符串类型,正常输出字符串的长度10
小结:

类型断言并不是类型转换!

类型断言并不是类型转换!

类型断言并不是类型转换!

特殊的any

为什么要特别提一下 any 这个类型呢。

因为 any 类型会覆盖 ts 的类型检查,没有类型之后就可以任意操作了,自由自在。

所以,在进行类型断言的时候,要慎重使用。

任意类型断言为any

放飞自我的任意类型any,变量可以随意赋值,又回到了最初js中的状态,无拘无束。

ts 复制代码
let y : string | number;
// 断言为 any 类型之后,随便写,不会提示错误,而且运行正常
(<any>y) = {
    a:'aaa',
    b:'bbb'
}
console.log(y); // { a: 'aaa', b: 'bbb' }

any 断言为其他具体类型

被强加的束缚,不再自由,卑微的活着。

嗯,其实也不算卑微,因为此时我们必然是知道具体的类型了,反正就是这样。

ts 复制代码
// 将any 断言为一个具体的类型
let z : any = '123';
console.log((<string>z).length); // 3
相关推荐
musk12126 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘35 分钟前
js代码09
开发语言·javascript·ecmascript
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref