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

淺談TypeScript的類型保護機制

 更新時間:2020年02月23日 16:31:47   作者:nachao  
這篇文章主要介紹了淺談TypeScript的類型保護機制,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

在編寫 TS 時,它做了比我們看到的更多的事情,例如類型保護機制。讓我們編寫的代碼更加嚴(yán)謹(jǐn),至于怎么回事,讓我們來看看吧。

由于這些機制的存在,就算你仍舊以 JS 原生的書寫方式,也能幫助你提前發(fā)現(xiàn)代碼中潛在的問題。(對于認(rèn)為 TS 語句更復(fù)雜的人,也能實現(xiàn) 0 門檻,不改變已有的習(xí)慣也能享受靜態(tài)檢測的好處。)

類型保護就是一些表達式,它們會在運行時檢查以確保在某個作用域內(nèi)的類型。

為了更簡單的理解,我們首先聲明一個聯(lián)合類型用于舉例:

interface Bird {
 fly(): any;
 layEggs(): any;
}

interface Fish {
 swim(): any
 layEggs(): any
}

type Pet = Bird | Fish;

無類型保護時報錯

function fn(pet: Pet) { 
 pet.layEggs(); // okay
 pet.swim();  // Error: Property 'swim' does not exist on type 'Bird | Fish'.
}

因為 TS 并不知道 pet 的實例是 Bird 還是 Fish,因此為了謹(jǐn)慎起見,在未手動聲明類型時 TS 中只能調(diào)用 聯(lián)合類型 中的 公共方法,例子中未 layEggs() 方法。除非你在調(diào)用指定對象數(shù)據(jù)的屬性或方法前,明確告訴 TS 數(shù)據(jù)對象是一個具體的類型。

類型斷言實現(xiàn)類型保護

我需要使用 <Fish>pet 的 類型斷言,來告訴 TS 目標(biāo)對象是什么類型:

function fn(pet: Fish | Bird) {
 if ((<Fish>pet).swim) {
  (<Fish>pet).swim();
 } else {
  (<Bird>pet).fly();
 }
}

雖然這樣的斷言滿足了我們的需求,但并不好方便,需要在各處都進行引用。
備注:如果在編寫 tsx 時,你需要將 (<Fish>pet) 寫成 (pet as Fish),因為在 tsx 中尖括號 <> 有特殊的含義。

函數(shù)中使用 is 定位類型

我們將上面的 if 內(nèi)的判斷封裝到函數(shù)中,獲得更方便的類型保護方式,此函數(shù)必須使用 parameterName is Type 的 類型謂語:

function isFish<T>(pet: Fish | Bird): pet is Fish {
 return !!(<Fish>pet).swim;
}

此函數(shù)必須返回為 boolean 類型才生效,當(dāng)返回 true 時則類型定位為 Fish ,返回 false 時則定位為 Fish 之外的類型(多個類型則以 聯(lián)合類型 定位)。

function fn(pet: Fish | Bird ) { 
 if (isFish(pet)) {
  pet.swim(); // 因 is 語句的生效,此語句塊中類型 let pet: Fish
 } else {
  pet.fly(); // 排除 Fish 之外的類型,此語句塊中類型 let pet: Bird
 }
}

需要注意是除了 if 中類型生效,TS 還能自動推斷出 else 中的類型。

就算你不使用 TS 這些特定的語句,也能享受 類型保護機制 的好處,下面讓我們來看看。

使用 typeof 進行類型保護

如果子類型是只是 number、string、boolean、symbol 這幾種數(shù)據(jù)類型,則可以直接使用 typeof 關(guān)鍵字,TS 能夠檢測并提供類型保護,我們直接引用官方給的例子:

function padLeft(value, padding): string {
  if (typeof padding === "number") {
    return Array(padding + 1).join(" ") + value;  // let padding: number
  }
  else {
    return padding + value;  // let padding: string
  }
}
  
const t1 = padLeft("world", 6);    // "   world"
const t2 = padLeft("world", "hello "); // "hello world"

使用 instanceof 進行類型保護

由于現(xiàn)在前端對于 面向?qū)ο?的開發(fā)項目越來越多,因此類的引用也更多了。那么類型保護用在此時,可謂是更加有重要,我們使用 instanceof 來達到這一效果:

interface IA { x(): void; }
interface IB { y(): void; }

class A implements IA {
 x() { }
}
class B implements IB {
 y() { }
}

function fn(e: A | B) {
 if (e instanceof A)
  e.x(); // let e: A
 else
  e.y(); // let e: 
}

基于類型保護機制,在語句塊中編輯器會給予指定類型的 方法提示,以及類型檢測時會提示用戶。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 解析OpenLayers 3加載矢量地圖源的問題

    解析OpenLayers 3加載矢量地圖源的問題

    矢量圖形最大的優(yōu)點是無論放大、縮小或旋轉(zhuǎn)等不會失真。在地圖中存在著大量的應(yīng)用,是地圖數(shù)據(jù)中非常重要的組成部分,這篇文章主要介紹了OpenLayers 3加載矢量地圖源的相關(guān)資料,需要的朋友可以參考下
    2021-12-12
  • 小程序websocket心跳庫(websocket-heartbeat-miniprogram)

    小程序websocket心跳庫(websocket-heartbeat-miniprogram)

    這篇文章主要介紹了小程序websocket心跳庫(websocket-heartbeat-miniprogram),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • 超強推薦的js編程中的簡潔寫法收集

    超強推薦的js編程中的簡潔寫法收集

    超強推薦的js編程中的簡潔寫法收集...
    2007-08-08
  • JS簡單實現(xiàn)浮動窗口效果示例

    JS簡單實現(xiàn)浮動窗口效果示例

    這篇文章主要介紹了JS簡單實現(xiàn)浮動窗口效果,涉及javascript操作浮動窗口的創(chuàng)建、打開、關(guān)閉等相關(guān)操作技巧,需要的朋友可以參考下
    2016-09-09
  • Bootstrap組件之下拉菜單,多級菜單及按鈕布局方法實例

    Bootstrap組件之下拉菜單,多級菜單及按鈕布局方法實例

    這篇文章主要介紹了Bootstrap組件之下拉菜單,多級菜單及按鈕布局方法,結(jié)合完整實例形式分析了Bootstrap多級菜單布局相關(guān)樣式功能與具體使用技巧,需要的朋友可以參考下
    2017-05-05
  • 淺談如何循序漸進的學(xué)好JS

    淺談如何循序漸進的學(xué)好JS

    如何才能學(xué)好JS?在這里給大家總結(jié)一些學(xué)習(xí)Js的經(jīng)驗,希望能對你們有所幫助。
    2021-05-05
  • 使用JS代碼實現(xiàn)頁面添加水印的方法詳解

    使用JS代碼實現(xiàn)頁面添加水印的方法詳解

    這篇文章主要介紹了使用80 行 JS 代碼實現(xiàn)頁面添加水?。何淖炙 ⒍嘈形淖炙?、圖片水印、文字&圖片水印,文中通過代碼示例給大家介紹的非常詳細(xì),具有一定的參考價值,需要的朋友可以參考下
    2024-05-05
  • Echarts中的clear()和dispose()用法實例

    Echarts中的clear()和dispose()用法實例

    這篇文章主要給大家介紹了關(guān)于Echarts中clear()和dispose()用法的相關(guān)資料,clear和dispose是echarts提供的用于解決內(nèi)存溢出的方法 ,文中介紹的非常詳細(xì),需要的朋友可以參考下
    2023-10-10
  • JavaScript中改變this指向的三種方式總結(jié)

    JavaScript中改變this指向的三種方式總結(jié)

    this?指向的值是可以通過手動方式去改變的,比如call、bind、apply方法,本文主要為大家介紹了這三種方式的具體實現(xiàn)步驟,需要的可以參考下
    2023-12-12
  • JSON 數(shù)據(jù)詳解及實例代碼分析

    JSON 數(shù)據(jù)詳解及實例代碼分析

    這篇文章主要介紹了JSON 數(shù)據(jù)詳解及實例代碼分析的相關(guān)資料,需要的朋友可以參考下
    2017-01-01

最新評論