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

大家好，我是苏先生，一名热爱钻研、乐于分享的前端工程师，跟大家分享一句我很喜欢的话：人活着，其实就是一种心态，你若觉得快乐，幸福便无处不在

github与好文

正文

什么是守卫？

守卫是一种代码安全性检查，只在满足某个指定条件时运行一段特定的逻辑，比如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和自定义

• 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，而对象下的属性是什么仍然是一个黑盒

• instanceof

对象类型的识别可以借助instanceof关键字，它通过检查a是否是b的实例来确定a的可用范围

• in

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

• 自定义

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

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

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

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

---

如果本文对您有用，希望能得到您的点赞和收藏

订阅专栏，每周更新1-2篇类型体操，等你哟😎