什么是守衛(wèi)？

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

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

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

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

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

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

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

如何守衛(wèi)？

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

1.typeof

該關(guān)鍵字只能用于對(duì)基礎(chǔ)類型進(jì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類型，因?yàn)?code>typeof對(duì)對(duì)象只能識(shí)別到object，而對(duì)象下的屬性是什么仍然是一個(gè)黑盒

2.instanceof

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

3.in

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

4.自定義

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

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

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

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

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

最新評(píng)論