TypeScript語法之類型操作實(shí)例代碼分析

這篇文章主要介紹了TypeScript語法之類型操作實(shí)例代碼分析的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇TypeScript語法之類型操作實(shí)例代碼分析文章都會有所收獲，下面我們一起來看看吧。

類型操作的方法

類型斷言的使用

有時候TypeScript無法獲取具體的類型信息，這個我們需要使用類型斷言（ Type Assertions）。

比如我們在操作DOM的時候, 通過 document.getElementById 獲取元素， TypeScript只知道該函數(shù)會返回HTMLElement ，但并不知道它具體的類型, 是無法得知具體是img還是div等等：

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

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

el.src = "圖片地址"

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

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

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

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

非空類型的斷言

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

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

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

printMessage("aaa")

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

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

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

printMessage("aaa")

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

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

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

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

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

例如我們定義如下一個對象

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

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

當(dāng)我們在其他地方獲取對象的屬性時, 意味著name屬性是一定可以獲取到的, 而friend屬性有可能是獲取不到的

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

兩個特殊操作符

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

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

!!操作符：

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

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

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

const message = "Hello World"

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

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

??操作符：

它是ES11增加的新特性；

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

let message: string|null = null

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

字面量類型介紹

除了前面我們所講過的類型之外，也可以使用字面量類型（ literal types）：

字面量類型必須和它的值是保持一致的

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

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

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

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

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

// 例如我們用一個變量來保存對齊方式
let align: "left" | "right" | "center" = "left"

align = "right"
align = "center"

字面量推理介紹

我們來看下面的代碼：

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

方式一: 當(dāng)我們確定options對象的method沒有寫錯的話, 我們可以使用類型斷言(將寬泛的類型轉(zhuǎn)為具體的類型), 如下:

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

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

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

關(guān)于“TypeScript語法之類型操作實(shí)例代碼分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“TypeScript語法之類型操作實(shí)例代碼分析”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。