共计 2123 个字符，预计需要花费 6 分钟才能阅读完成。
●断言: 其实就是通知 TS, 我晓得我本人在做什么, 不要你管
●因为咱们在 TS 的开发过程中, TS 会辨认咱们写的所有的内容, 而后会傻傻的依据代码去辨认你写的内容
●先来看个例子吧
const box = document.querySelector('.box')
console.log(box.innerHTML)○一段看似简略的代码, 谁都意识○然而一旦运行起来
○这是什么鬼, 为什么会报错呢
●浅浅的解释一下
咱们通过 querySelector 办法从页面上获取一个元素
这是没有问题的, 然而依据语法, 咱们获取到的有可能是一个元素
也有可能是 null, 也就是页面上基本没有这个元素
然而 TS 在辨认的时候, 其实是傻傻的, 不会去辨认你的 html 元素, 也不会去捕捉你的页面
只是单纯的看你书写的 ts 代码, 那么他就会认为, 你有可能获取不到元素
这个时候, 就会给你提醒谬误了
因为如果万一真的是 null, 那么必定是不能调用 innerHTML 属性的
谬误也就呈现了
●当咱们开发的时候, 在写代码的时候, 只有咱们精确的通知他, 我这个代码肯定能获取到元素, 你不要管东管西的, 那么 TS 就不会在提醒谬误了
就像下面的代码, 只有你在应用 innerHTML 的时候, 精确的通知他
我的 box 肯定是一个 HTML 元素, 那么就肯定能调用 innerHTML 这个属性
这个时候, TS 就不会给你提醒谬误了
类型断言
形式 1: 利用 as 书写断言
●语法 : 数据 as 类型
const box = document.querySelector('.box')
console.log((box as HTMLDivElement).innerHTML)
形式 2 : 利用 <> 书写断言●语法 : < 类型 > 数据
const box = document.querySelector('.box')
console.log((<HTMLDivElement>box).innerHTML)这就是对一个数据进行类型断言
○也就是在开发的过程中
○讲某一个数据判定为某一个类型
○这样就能够间接依照该数据类型去调用属性和办法了
非空断言
●也就是在开发的过程中, 疏忽有可能呈现的 undefined 和 null 类型
●这里咱们应用 ! 来做这个事件
const box = document.querySelector('.box')
console.log(box!.innerHTML)●留神
当 box 只有可能是 一个内容 或者 undefined 或者 null 的时候
咱们能够用 ! 进行断言, 也就是通知他, box 不可能是 null 或者 undefined
利用 ! 排除了 undefined 和 null 的可能
确定赋值断言
●在开发中还有这样一种状况, 就是咱们在初始定义某一个变量的时候, 有可能是不赋值的
●在前面的代码或者函数内对其进行赋值, 而后再应用
// 初始化的时候不进行赋值
let n: number
// 通过调用这个函数对 n 进行赋值操作
function init () { n = 100}
init()
// 这里应用一下 x
console.log(x.toFixed(2))○而后咱们就发现, TS 又提醒谬误了
●这是因为 TS 不太分明你的 init 函数调用当前会对 x 进行赋值●所以就会通知你, 你还没有赋值呢, 就调用了 toFixed 办法●这个时候, 咱们就能够应用确定赋值断言, 还是应用 !
// 初始化的时候不进行赋值
let n!: number
// 通过调用这个函数对 n 进行赋值操作
function init () { n = 100}
init()
// 这里应用一下 x
console.log(x.toFixed(2))●在初始化的时候, 给变量前面加一个 !
○也就是通知 TS, 这个变量我肯定会百分之一万赋值的, 你少管
○这样今后在遇到你应用 x 这个变量的时候
○TS 就会默认认为他肯定有值
○也就不会提醒谬误了
const 断言
●这个有点和咱们定义变量的关键字差不多, 然而又不太一样, 小伙伴不要搞混同了哦
●咱们先来看这个代码把
let n: number = 100 as const
let s: string = 'hello world' as const○这样一来, 咱们定义的 n 和 s 就不能被更改了
●我间接用 const 定义变量不好吗, 为什么 … (如果不能骂街, 那我无话可说)
●hold on … hold on !!
●咱们再来看下一段代码
const obj = {name: 'Jack', age: 18}
○这个就是用 const 定义的一个变量, 只不过值是一个援用数据类型了
○咱们的 const 只能保障 obj 不会被扭转, 然而 obj 外部的子级数据是不会被限度的
○如果咱们想让 obj 内的每一个成员都是只读的属性, 不容许被更改呢
○只能是在书写接口的时候, 把每一个属性都定义为 readonly
●O(∩_∩)O 哈哈~, 我的 const 断言有用武之地了
const obj = {name: 'Jack', age: 18} as const○这样一来, 咱们 obj 内 所有的子级数据就都不能被更改了
●留神:○const : 是 ES6 中定义变量的关键字, 反馈以后定义的是一个常量, 不容许被更改, 然而对于援用数据类型来说, 起子属性还是能够被批改的○as const : TS 内的语法, 通知 TS, 被断言的内容不论是本人自身还是其子属性都不容许被批改, TS 就会对每一个层级的数据进行最严格的判断和限度