類(lèi)型操作的補(bǔ)充

類(lèi)型斷言的使用

有時(shí)候TypeScript無(wú)法獲取具體的類(lèi)型信息，這個(gè)我們需要使用類(lèi)型斷言（ Type Assertions）。

比如我們?cè)诓僮鱀OM的時(shí)候, 通過(guò) document.getElementById 獲取元素， TypeScript只知道該函數(shù)會(huì)返回HTMLElement ，但并不知道它具體的類(lèi)型, 是無(wú)法得知具體是img還是div等等：

當(dāng)我們加上類(lèi)型斷言后, TypeScript就可以得知具體的類(lèi)型信息

const el = document.getElementById("app") as HTMLImageElement

el.src = "圖片地址"

TypeScript只允許類(lèi)型斷言轉(zhuǎn)換為 更具體 或者 不太具體(指的是any和unknown)的類(lèi)型版本，此規(guī)則可防止不可能的強(qiáng)制轉(zhuǎn)換：

如下直接轉(zhuǎn)是會(huì)報(bào)錯(cuò)的

我們可以先將message轉(zhuǎn)為any或者unknown, 再轉(zhuǎn)為number, 但是不推薦這樣做

const message = "Hello World"
const num: number = (message as any) as number

非空類(lèi)型的斷言

當(dāng)我們編寫(xiě)下面的代碼時(shí)，在執(zhí)行ts的編譯階段會(huì)報(bào)錯(cuò)：

這是因?yàn)閭魅氲膍essage有可能是為undefined的，這個(gè)時(shí)候是不能執(zhí)行方法的；

// 參數(shù)為可選類(lèi)型的時(shí)候
function printMessage(message?: string) {
  console.log(message.toUpperCase())
}

printMessage("aaa")

我們確定上面代碼傳入的參數(shù)是有值的, 但是編譯還是不通過(guò)，這個(gè)時(shí)候我們可以使用非空類(lèi)型斷言：

非空斷言使用的是 ! ，表示可以確定某個(gè)標(biāo)識(shí)符是有值的，跳過(guò)ts在編譯階段對(duì)它的檢測(cè), 雖然逃過(guò)了編譯階段的檢查, 但是代碼依然是不嚴(yán)謹(jǐn)?shù)模?/p>

function printMessage(message?: string) {
  // 加上 ! 代表著保證這個(gè)message一定是有值的
  console.log(message!.toUpperCase())
}

printMessage("aaa")

可選鏈?zhǔn)褂媒榻B

可選鏈?zhǔn)聦?shí)上并不是TypeScript獨(dú)有的特性，它是ES11（ ES2020）中增加的特性：

可選鏈?zhǔn)褂每蛇x鏈操作符 ?.；

它的作用是當(dāng)對(duì)象的屬性不存在時(shí)，會(huì)短路表達(dá)式后面就不會(huì)執(zhí)行，直接返回undefined，如果存在，那么才會(huì)繼續(xù)執(zhí)行；

雖然可選鏈操作是ECMAScript提出的特性，但是和TypeScript一起使用更版本；

例如我們定義如下一個(gè)對(duì)象

type Person = {
  name: string
  friend?: {
    name: string
    age?: number
  }
}

const info: Person = {
  name: "chenyq"
}

當(dāng)我們?cè)谄渌胤将@取對(duì)象的屬性時(shí), 意味著name屬性是一定可以獲取到的, 而friend屬性有可能是獲取不到的

console.log(info.name)
// 表示friend有值的情況下再取name或者age, 沒(méi)有值就是undefined, 代碼不會(huì)報(bào)錯(cuò)
console.log(info.friend?.name)
console.log(info.friend?.age)

兩個(gè)特殊操作符

有時(shí)候我們還會(huì)看到 !! 和 ?? 操作符，這些都是做什么的呢？

!! 和 ?? 操作符, 這本身也是JavaScript的特性, 并不是TypeScript的語(yǔ)法

!!操作符：

將一個(gè)其他類(lèi)型轉(zhuǎn)換成boolean類(lèi)型；

類(lèi)似于Boolean(變量)的方式；

例如我們想要將message轉(zhuǎn)為boolean類(lèi)型再賦值給flag, 我們有兩種方式

const message = "Hello World"

// 方式一: 通過(guò)Boolean(變量)的方式
let flag1 = Boolean(message)
console.log(flag1) // true

// 方式二: 通過(guò) !! 操作符
let flag2 = !!message 
console.log(flag2)

??操作符：

它是ES11增加的新特性；

空值合并操作符（ ??）是一個(gè)邏輯操作符，當(dāng)操作符的左側(cè)是 null 或者 undefined 時(shí)，返回其右側(cè)操作數(shù)， 否則返回左側(cè)操作數(shù)；

let message: string|null = null

// 當(dāng)message沒(méi)有值時(shí), 將??操作符右邊的默認(rèn)值賦值給content
// 當(dāng)message有值時(shí), 將message的值賦值給content
const content = message ?? "我是默認(rèn)值"
console.log(content) // 我是默認(rèn)值

字面量類(lèi)型介紹

除了前面我們所講過(guò)的類(lèi)型之外，也可以使用字面量類(lèi)型（ literal types）：

字面量類(lèi)型必須和它的值是保持一致的

// "Hello World"是可以作為類(lèi)型的, 這個(gè)就叫字面量類(lèi)型
let message: "Hello World" = "Hello World"
let num: 123 = 123

// 不能是其他的值
// message = "Hello"

那么這樣做有什么意義呢？

默認(rèn)情況下這么做是確實(shí)是沒(méi)有意義的；

但是我們可以讓多個(gè)字面量類(lèi)型 結(jié)合 聯(lián)合類(lèi)型在一起, 就有了意義

// 例如我們用一個(gè)變量來(lái)保存對(duì)齊方式
let align: "left" | "right" | "center" = "left"

align = "right"
align = "center"

字面量推理介紹

我們來(lái)看下面的代碼：

由于我們的對(duì)象再進(jìn)行字面量推理的時(shí)候，options其實(shí)是一個(gè) {url: string, method: string}，而request的methods是字面量類(lèi)型Method, 所以我們沒(méi)辦法將 一個(gè) string 類(lèi)型的值賦值給一個(gè)字面量類(lèi)型, 因此編譯階段就會(huì)報(bào)錯(cuò)。

方式一: 當(dāng)我們確定options對(duì)象的method沒(méi)有寫(xiě)錯(cuò)的話(huà), 我們可以使用類(lèi)型斷言(將寬泛的類(lèi)型轉(zhuǎn)為具體的類(lèi)型), 如下:

// 使用類(lèi)型斷言
request(options.url, options.methods as Method)

方式二: 看起來(lái)有點(diǎn)奇怪, 但是是官方文檔中提到的, 給對(duì)象添加as const

const options = {
  url: "http://aaa.org",
  methods: "POST"
} as const 

總結(jié)

到此這篇關(guān)于TypeScript語(yǔ)法詳解之類(lèi)型操作補(bǔ)充的文章就介紹到這了,更多相關(guān)TypeScript類(lèi)型操作的補(bǔ)充內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論