TypeScript語法詳解之類型操作的補充

Posted on by

類型操作的補充

類型斷言的使用

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

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

當我們加上類型斷言後, TypeScript就可以得知具體的類型信息

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

el.src = "圖片地址"

TypeScript隻允許類型斷言轉換為 更具體 或者 不太具體(指的是any和unknown)的類型版本，此規則可防止不可能的強制轉換：

如下直接轉是會報錯的

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

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

非空類型的斷言

當我們編寫下面的代碼時，在執行ts的編譯階段會報錯：

這是因為傳入的message有可能是為undefined的，這個時候是不能執行方法的；

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

printMessage("aaa")

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

非空斷言使用的是 ! ，表示可以確定某個標識符是有值的，跳過ts在編譯階段對它的檢測, 雖然逃過瞭編譯階段的檢查, 但是代碼依然是不嚴謹的；

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

printMessage("aaa")

可選鏈使用介紹

可選鏈事實上並不是TypeScript獨有的特性，它是ES11（ ES2020）中增加的特性：

可選鏈使用可選鏈操作符 ?.；

它的作用是當對象的屬性不存在時，會短路表達式後面就不會執行，直接返回undefined，如果存在，那麼才會繼續執行；

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

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

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

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

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

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

兩個特殊操作符

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

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

!!操作符：

將一個其他類型轉換成boolean類型；

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

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

const message = "Hello World"

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

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

??操作符：

它是ES11增加的新特性；

空值合並操作符（ ??）是一個邏輯操作符，當操作符的左側是 null 或者 undefined 時，返回其右側操作數， 否則返回左側操作數；

let message: string|null = null

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

字面量類型介紹

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

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

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

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

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

默認情況下這麼做是確實是沒有意義的；

但是我們可以讓多個字面量類型 結合 聯合類型在一起, 就有瞭意義

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

align = "right"
align = "center"

字面量推理介紹

我們來看下面的代碼：

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

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

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

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

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

總結

到此這篇關於TypeScript語法詳解之類型操作補充的文章就介紹到這瞭,更多相關TypeScript類型操作的補充內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：