專欄介紹

TypeScript從入門到實(shí)踐專欄是博主在學(xué)習(xí)和工作過程中的總結(jié)，實(shí)用性非常強(qiáng)，歡迎訂閱哦，學(xué)會(huì)TS不迷路。

類型守衛(wèi)

在前幾篇介紹了斷言，在使用斷言時(shí)我們已經(jīng)確定了變量的類型，確定該類型時(shí)一定存在（否則則會(huì)欺騙編譯，運(yùn)行時(shí)報(bào)錯(cuò)），那么為什么還要類型守衛(wèi)呢？因?yàn)轭愋蛿嘌赃€是需要借助類型守衛(wèi)的，類型守衛(wèi)主要是用來判斷未知類型是不是所需要的類型。
類型守衛(wèi)主要包括四種方式：

• in
• typeof
• instanceof
• 自定義類型

1、in- 定義屬性場(chǎng)景下內(nèi)容的確認(rèn)

先寫兩個(gè)接口Teacher、Student，然后將這兩個(gè)接口進(jìn)行聯(lián)合聲明，使用in來判斷屬性是否在傳遞的參數(shù)中，然后分別作輸出。
缺點(diǎn)：用 in 關(guān)鍵字縮小數(shù)據(jù)類型必須有一個(gè)獨(dú)特的屬性作為判別標(biāo)準(zhǔn)，否則不能用 in 關(guān)鍵字

interface Teacher{ name:string; courses:string; } interface Student{ name:string; study:string; } type Class = Teacher | Student； function getInfo(val:Class){ //此時(shí)val類型縮小為Teacher類型 if('courses' in val){ console.log(val.courses) } //此時(shí)val類型縮小為Student類型 if('study' in val){ console.log(val.study) } } getInfo({ name: 'student', study: "Philosophy" }); //打印結(jié)果為Philosophy，因?yàn)閭鲄⒅泻衧tudy屬性，所以走了第二個(gè)判斷 

    




    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

2、typeof-類型分類場(chǎng)景下的身份確認(rèn)

為什么用typeof做類型守衛(wèi)呢？因?yàn)閠ypeof能判斷JS基本數(shù)據(jù)類型。typeof只能識(shí)別以下類型：

• Boolean
• String
• Undefined
• Function
• Number
• Bigint
• Symbol

寫法：typeof a，a是變量（基本數(shù)據(jù)類型）

奇怪為什么typeof不能識(shí)別null呢？

let a= null typeof a;//object 


    

        1
    

    

        2
    

null是一個(gè)只有一個(gè)值的特殊類型，表示一個(gè)空對(duì)象引用，可以用來清空對(duì)象，它是object 類型是歷史遺留下來的問題，曾提議改為null類型，被拒絕了。
typeof 識(shí)別其他的類型比如數(shù)組，正則等都是object類型

let a =[1] typeof a;//Object var reg = RegExp("a","i"); typeof reg//reg 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

typeof 怎么起到守衛(wèi)的作用呢，通過typeof判斷變量類型然后執(zhí)行相應(yīng)的邏輯，具體如下：

function class(name: string, score: string | number) { //識(shí)別到sore為number類型 if (typeof score === "number") { return "teacher:" + name + ":" + score; } //識(shí)別到sore為string類型 if (typeof score === "string") { return "student:" + name + ":" + score; } } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

上面案例的傳參都會(huì)基本類型，當(dāng)傳一個(gè)對(duì)象時(shí)候，我們也可以用對(duì)象中的屬性來進(jìn)行判斷，比如：

interface A{ a:string; } interface B{ a:number; } type Class = A | B； function getInfo(val:Class){ //判斷val的屬性a的類型為number類型 if(typeof val.a === "number"){ console.log('B:'+ val.a) } //判斷val的屬性a的類型為string類型 if(typeof val.a === "string"){ console.log('A' + val.a) } } 

    




    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

3、instanceof-類型分類場(chǎng)景下的身份確認(rèn)

為什么用instanceof呢？因?yàn)?code style="box-sizing:border-box;outline:0px;user-select:text !important;font-family:"font-size:14px;line-height:22px;color:#C7254E;background-color:#F9F2F4;border-radius:2px;padding:2px 4px;overflow-wrap:break-word;">typeof有局限性，引用類型比如數(shù)組，正則等無法精確識(shí)別是哪一個(gè)種型，instanceof能夠識(shí)別變量（比如實(shí)例對(duì)象）是否屬于這個(gè)類。instanceof不能檢測(cè)原始值類型的值，但是原始值對(duì)應(yīng)的對(duì)象格式實(shí)例則可以檢測(cè)。具體instanceof是怎么做類型守衛(wèi)的呢?

• 寫法：a instanceof b，a是參數(shù)，b是一般都是接口類型。

interface Teacher{ name:string; courses:string; } interface Student{ name:string; study:string; } type Class = Teacher | Student； function getInfo(val:Class){ //判斷val的類型是否是定義的接口Teacher類型 if(val instanceof Teacher){ console.log('teacher:'+ val.courses) } //判斷val的類型是否是定義的接口Student類型 if(val instanceof Student){ console.log('student' + val.study) } } 

    




    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

4、自定義類型

TS中有一個(gè)關(guān)鍵字is可以判斷變量是否屬于某種類型。

• 寫法：a is b，意思是a是b類型，a是函數(shù)參數(shù)，也可以是this關(guān)鍵字，this關(guān)鍵字一般用在累中判斷，b可以是接口類型，b也可以是number、string等其他合法的TS類型。這種寫法稱作類型謂詞，使用類型謂詞的函數(shù)稱為類型謂詞函數(shù)，該函數(shù)的返回值必須的boolean類型。
• 使用：先定義一個(gè)變量，該變量表示是否是某種類型，比如以下定義了isTeacher，代表了參數(shù)cls是Teacher類型，然后用這個(gè)變量來判斷。

（1）函數(shù)參數(shù)形式

函數(shù)中的參數(shù)類型為多個(gè)類型，通過is關(guān)鍵字自定義類型，將函數(shù)參數(shù)精確到某種類型，然后再執(zhí)行相應(yīng)的邏輯。

interface Teacher{ name:string; courses:string; } interface Student{ name:string; study:string; } const isTeacher = function (cls: Teacher | Student): cls is Teacher { return 'courses' in cls; } const getName = (cls: Teacher | Student) => { if(isTeacher(cls)) { return cls.courses; } } 

    




    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

（2）this形式

下面代碼中的 User 是抽象類，不能被實(shí)例化，Staff 和 Student 都繼承自 User。實(shí)例方法 isStaff 用于將類型收窄為 Staff，實(shí)例方法 isStudent 用于將類型收窄為 Student

abstract class User { name: string; constructor(name: string) { this.name = name; } isStudent(): this is Student { return this instanceof Student; } isStaff(): this is Staff { return this instanceof Staff; } } class Student extends User{ study: string; constructor(name: string, study: string) { super(name) this.study = study } } class Staff extends User { workingYears: number; constructor(name: string, workingYears: number) { super(name) this.workingYears = workingYears } } function judgeClassType(obj: User) { if (obj.isStaff()) { // obj的類型被縮小為 Staff } else if (obj.isStudent()){ // obj 的類型被縮小為 Student } }

    藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。



     



    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



    藍(lán)藍(lán)設(shè)計(jì)( m.shtzxx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司