TypeScript中四种类型守卫的详解与实践

类型守卫基础概念

什么是类型守卫？

类型守卫是一种用于增强代码安全性的检查机制，它仅在满足特定条件时才执行相应的逻辑分支，例如在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中的四种类型守卫实现

如何实施类型守卫？

在TypeScript中，实现类型守卫主要有四种方式：in关键字、instanceof运算符、typeof运算符以及自定义类型保护函数。

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

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为 true 的结果会进一步被TypeScript编译器推断为类型，从而允许访问该类型特有的属性。

至此，关于TypeScript中四种类型守卫的介绍已完成，更多相关TypeScript类型守卫内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！