欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年09月03日 10:29:26   作者:林有酒  
在TypeScript中若一個變量使用了聯(lián)合類型,那么當(dāng)我們使用該變量時必不可少的會去明確的限制該變量的具體類型,這稱為類型縮小,這篇文章主要給大家介紹了關(guān)于TypeScript學(xué)習(xí)筆記之類型縮小的相關(guān)資料,需要的朋友可以參考下

類型縮小

什么是類型縮小呢?

類型縮小的英文是 Type Narrowing;

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

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

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

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

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

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

typeof

在TypeScript中,檢查返回的值typeof是一種類型保護(hù):因為TypeScript對如何typeof操作不同的值進(jìn)行編碼。

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

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

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

// 測試
printID(123)
printID("aaa")
  • 上面代碼中, 整個if判斷語句就是類型縮小, 例如當(dāng)代碼進(jìn)入if語句第一個分支時, 一定是string類型, 進(jìn)入第二個分支一定是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)方法")
  }
}

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

instanceof

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

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

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

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

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

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

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

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

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

in

Javascript 有一個運(yùn)算符,用于確定對象是否具有帶名稱的屬性: in運(yùn)算符

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

// () => void表示是一個函數(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()
  }
}

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

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

總結(jié)

到此這篇關(guān)于TypeScript類型縮小的文章就介紹到這了,更多相關(guān)TypeScript類型縮小內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • JS動態(tài)添加選項案例分析

    JS動態(tài)添加選項案例分析

    這篇文章主要介紹了JS動態(tài)添加選項的方法,結(jié)合實例形式分析了javascript針對頁面元素動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下
    2016-10-10
  • 在Typescript中如何使用for...in詳解

    在Typescript中如何使用for...in詳解

    這篇文章主要給大家介紹了關(guān)于在Typescript中如何使用for...in的相關(guān)資料,以及TypeScript中使用for...in遍歷對象屬性會報錯的解決辦法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-03-03
  • Raphael帶文本標(biāo)簽可拖動的圖形實現(xiàn)代碼

    Raphael帶文本標(biāo)簽可拖動的圖形實現(xiàn)代碼

    Javascript和Raphael順便學(xué)習(xí)了一下,主要是為了實現(xiàn)一個可拖動的矩形同時矩形上還得顯示標(biāo)簽,網(wǎng)上關(guān)于這方面的知識提的很是于是本人自不量力寫了一下,感興趣的你可不要錯過了哈,希望可以幫助到你
    2013-02-02
  • js替換字符串中所有指定的字符(實現(xiàn)代碼)

    js替換字符串中所有指定的字符(實現(xiàn)代碼)

    下面小編就為大家?guī)硪黄猨s替換字符串中所有指定的字符(實現(xiàn)代碼)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08
  • 基于JavaScript實現(xiàn)帶數(shù)據(jù)驗證和復(fù)選框的表單提交

    基于JavaScript實現(xiàn)帶數(shù)據(jù)驗證和復(fù)選框的表單提交

    這篇文章主要介紹了基于JavaScript實現(xiàn)帶數(shù)據(jù)驗證和復(fù)選框的表單提交功能,需要的朋友可以參考下
    2017-08-08
  • 淺談Javascript Base64 加密解密

    淺談Javascript Base64 加密解密

    這篇文章主要簡單介紹了Javascript Base64 加密解密的使用方法,有需要的小伙伴參考下
    2014-12-12
  • 怎么選擇Javascript框架(Javascript Framework)

    怎么選擇Javascript框架(Javascript Framework)

    如果你正面臨這樣的問題,希望下面的幾個建議對你在選擇javascript框架上會有所幫助
    2013-11-11
  • 淺析JavaScript動畫

    淺析JavaScript動畫

    JavaScript 動畫我們可以使用 JavaScript 來創(chuàng)建動態(tài)的圖像。實例 按鈕動畫 利用兩個不同的事件來驅(qū)動兩個相應(yīng)的函數(shù),來切換兩張對應(yīng)的圖片以創(chuàng)造出動畫效果。
    2015-06-06
  • Axios取消重復(fù)請求的方法實例詳解

    Axios取消重復(fù)請求的方法實例詳解

    在開發(fā)中,經(jīng)常會遇到接口重復(fù)請求導(dǎo)致的各種問題,這篇文章主要給大家介紹了關(guān)于Axios取消重復(fù)請求的相關(guān)資料,需要的朋友可以參考下
    2021-06-06
  • js貪心算法 錢幣找零問題代碼實例

    js貪心算法 錢幣找零問題代碼實例

    這篇文章主要介紹了js貪心算法 錢幣找零問題代碼實例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-09-09

最新評論