什么是守衛(wèi)？

守衛(wèi)是一種代碼安全性檢查，只在滿足某個指定條件時運行一段特定的邏輯，比如vite中的import.meta.hot

什么是類型守衛(wèi)？

類型守衛(wèi)是TypeScript中特有的用于在運行時檢查類型的方式，它顯式的將javascript代碼按類型劃分，從而確保了運行安全

為什么需要類型守衛(wèi)？

這可能要從一個聯(lián)合類型說起。如下，是筆者提出的一個可能不那么貼合的示例：有聯(lián)合類型Animal，它由Dog和Sp組成，它們都有hobby屬性，但屬性的類型不同

type Dog = {
    hobby:'chishi'
}
type Sp = {
    hobby:()=>void;
}
type Animal = Dog | SP

現(xiàn)在你的代碼里要根據(jù)Animal去做一些事情，預期是Sp時執(zhí)行函數(shù)調(diào)用，是Dog輸出console提示。如果沒有守衛(wèi)，則該需求無法實現(xiàn)，因為你無法確定subject到底是哪一種，執(zhí)行調(diào)用不符合Dog，執(zhí)行輸出不滿足Sp

如何守衛(wèi)？

在TypeScript中，實現(xiàn)守衛(wèi)的方式有4種：in、instanceof、typeof和自定義

1.typeof

該關(guān)鍵字只能用于對基礎類型進行守衛(wèi)，具體來說，是number、string、boolean、symbol、function、undefined

function log(subject:number|string):string{
    if(typeof subject === 'number'){
        return `${subject+5}`
    }
    if(typeof subject === 'string'){
        return subject + '5'
    }
    return ''
}

但它無法解決我們前文舉例的Animal類型，因為typeof對對象只能識別到object，而對象下的屬性是什么仍然是一個黑盒

2.instanceof

對象類型的識別可以借助instanceof關(guān)鍵字，它通過檢查a是否是b的實例來確定a的可用范圍

3.in

當兩個類型是對象形式，但具有不同的獨有屬性時，可以使用in關(guān)鍵字來守衛(wèi)。如下，TypeScript會自動將其推斷為Dog類型

4.自定義

自定義類型保護是一種函數(shù)寫法，該函數(shù)返回true或false，TypeScript會對返回值進行類型推斷

如下，當傳遞的subject中包含hobby時，'hobby' in subject的結(jié)果為true

function isDog(subject:any):subject is Dog{
    return 'hobby' in subject
}

true的結(jié)果會進一步被TypeScript推斷為Dog類型

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

最新評論