浅聊一下TypeScript中的4种类型守卫

什么是守卫？

守卫是一种代码安全性检查，只在满足某个指定条件时运行一段特定的逻辑，比如vite中的import.meta.hot

什么是类型守卫？

类型守卫是TypeScript中特有的用于在运行时检查类型的方式，它显式的将javascript代码按类型划分，从而确保了运行安全

为什么需要类型守卫？

这可能要从一个联合类型说起。如下，是笔者提出的一个可能不那么贴合的示例：有联合类型Animal，它由Dog和Sp组成，它们都有hobby属性，但属性的类型不同

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

现在你的代码里要根据Animal去做一些事情，预期是Sp时执行函数调用，是Dog输出console提示。如果没有守卫，则该需求无法实现，因为你无法确定subject到底是哪一种，执行调用不符合Dog，执行输出不满足Sp

如何守卫？

在TypeScript中，实现守卫的方式有4种：in、instanceof、typeof和自定义

1.typeof

该关键字只能用于对基础类型进行守卫，具体来说，是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关键字，它通过检查a是否是b的实例来确定a的可用范围

3.in

当两个类型是对象形式，但具有不同的独有属性时，可以使用in关键字来守卫。如下，TypeScript会自动将其推断为Dog类型

4.自定义

自定义类型保护是一种函数写法，该函数返回true或false，TypeScript会对返回值进行类型推断

如下，当传递的subject中包含hobby时，'hobby' in subject的结果为true

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

true的结果会进一步被TypeScript推断为Dog类型

到此这篇关于浅聊一下TypeScript中的4种类型守卫的文章就介绍到这了,更多相关TypeScript类型守卫内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！