快捷導(dǎo)航

TypeScript學(xué)習(xí)筆記之類型縮小

更新時(shí)間：2022年09月03日 10:29:26 作者：林有酒

在TypeScript中若一個(gè)變量使用了聯(lián)合類型,那么當(dāng)我們使用該變量時(shí)必不可少的會(huì)去明確的限制該變量的具體類型，這稱為類型縮小,這篇文章主要給大家介紹了關(guān)于TypeScript學(xué)習(xí)筆記之類型縮小的相關(guān)資料,需要的朋友可以參考下

類型縮小

什么是類型縮小呢？

類型縮小的英文是 Type Narrowing；

我們可以通過類似于 typeof padding === "number" 的判斷語句，來改變TypeScript的執(zhí)行路徑；

在給定的執(zhí)行路徑中，我們可以縮小比聲明時(shí)更小的類型，這個(gè)過程稱之為縮小;

而我們編寫的 typeof padding === "number 語句可以稱之為類型保護(hù)（ type guards）；

常見的類型保護(hù)有如下幾種：

typeof
平等縮?。ū热?==、 !==）
instanceof
in
等等…

我們主要講解typeof、平等縮小、instanceof、in這四種

typeof

在TypeScript中，檢查返回的值typeof是一種類型保護(hù)：因?yàn)門ypeScript對(duì)如何typeof操作不同的值進(jìn)行編碼。

例如我們有下面一個(gè)常見, 封裝一個(gè)函數(shù), 函數(shù)要求傳入?yún)?shù)ID, 傳入的ID有可能是string類型有可能是number類型

當(dāng)傳入的ID是string類型時(shí), 要求將ID的字母全部轉(zhuǎn)為大寫

function printID(id: string|number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase())
  } else {
    console.log(id)
  }
}

// 測(cè)試
printID(123)
printID("aaa")

上面代碼中, 整個(gè)if判斷語句就是類型縮小, 例如當(dāng)代碼進(jìn)入if語句第一個(gè)分支時(shí), 一定是string類型, 進(jìn)入第二個(gè)分支一定是number類型
if的判斷語句就稱為類型保護(hù)

平等縮小

我們可以使用Switch或者相等的一些運(yùn)算符來表達(dá)相等性（比如=== , !== , == , and != ）：

type Direction = "left" | "right" | "top" | "bottom"
function printDirection(direction: Direction) {
  // 平等類型縮小
  switch (direction) {
    case "left":
      console.log(direction)
      break
    case "right":
      console.log(direction)
      break
    case "top":
      console.log(direction)
      break
    case "bottom":
      console.log(direction)
      break
    default:
      console.log("調(diào)用默認(rèn)方法")
  }
}

// 測(cè)試
printDirection("left")
printDirection("right")
printDirection("top")
printDirection("bottom")

instanceof

JavaScript 有一個(gè)運(yùn)算符來檢查一個(gè)值是否是另一個(gè)值的“實(shí)例”：

function printTime(time: string|Date) {
  // 判斷time是否是Date的實(shí)例
  if (time instanceof Date) {
    console.log(time.toUTCString())
  } else {
    console.log(time)
  }
}

// 測(cè)試
printTime("2020-01-02")
const date = new Date()
printTime(date)

如果不好理解我們可以看下面這個(gè)例子

class Teacher {
  working() {
    console.log("正在工作")
  }
}

class Student {
  studying() {
    console.log("正在學(xué)習(xí)")
  }
}

function work(p: Student | Teacher) {
  // 判斷是哪一個(gè)實(shí)例
  if (p instanceof Teacher) {
    p.working()
  } else {
    p.studying()
  }
}

// 測(cè)試
const stu = new Student()
const tec = new Teacher()

work(stu) // 正在學(xué)習(xí)
work(tec) // 正在工作

in

Javascript 有一個(gè)運(yùn)算符，用于確定對(duì)象是否具有帶名稱的屬性： in運(yùn)算符

如果指定的屬性在指定的對(duì)象或其原型鏈中，則in 運(yùn)算符返回true；

// () => void表示是一個(gè)函數(shù)類型
type Dog = {running: () => void}
type Fish = {swimming: () => void}

function walk(animal: Dog|Fish) {
  // 判斷函數(shù)是否在animal中
  if ("swimming" in animal) {
    animal.swimming()
  } else {
    animal.running()
  }
}

// 測(cè)試
const dog: Dog = {
  running() {
    console.log("狗是跑的")
  }
}
const fish: Fish = {
  swimming() {
    console.log("魚是游的")
  }
}

walk(dog) // 狗是跑的
walk(fish) // 魚是游的