Typescript - 类型守卫（typeof / in / instanceof / 自定义类型保护的类型谓词）通俗易懂详细教程

前言

类型守卫用于获取变量类型信息，通常使用在条件块语句中。类型守卫是返回布尔值的常规函数，接受一个类型并告诉 TypeScript 是否可以缩小到更具体的类型。类型守卫具有唯一的属性，可以确保测试的值返回的是布尔值类型。

TypeScript 使用了一些内置的 JavaScript 操作符（见下方），这些操作符用于确定一个对象是否包含属性。类型守卫可以让你指导 TypeScript 编译器在特定的上下文中推断出变量的特定类型，确保参数的类型与你指定的一致。

类型守卫非常类似于特征检测，允许您检测值原型和属性。

类型保护是可执行运行时检查的一种表达式，用于确保该类型在一定的范围内。 换句话说，类型保护可以保证一个字符串是一个字符串，尽管它的值也可以是一个数值。类型保护与特性检测并不是完全不同，其主要思想是尝试检测属性、方法或原型，以确定如何处理值。

Typescript 类型守卫主要在类型窄化时使用，其实现类型守卫主要有以下 4 种方式：

1. typeof（类型判断）
2. in（属性或方法判断）
3. instanceof（实例判断）
4. 自定义类型保护的类型谓词

typeof

该关键字或许您可能在 JavaScript 中见过，甚至使用过。

typeof 只能检查基本数据类型（不能检查复杂数据类型），比如下面这些：

string | number | bigint | boolean | symbol | undefined | object | function

使用方法很简单，如下代码所示：

// 姓名(字符串类型)letuname:string="王佳斌"// 判断其类型console.log(typeofuname)//string

in

它用于检查对象是否具有特定的属性，并使用该属性区分不同的类型。它通常返回一个布尔值，表示该属性是否存在于该对象中。

该操作符用于遍历目标类型的公开属性名，如下代码所示：

// 示例一constobj={name:'王佳斌',age:15}console.log('name属性是否存在于obj对象?','name'inobj)//"name属性是否存在于obj对象?", true// 示例二typeProperty='name'|'age'|'phoneNum';typePropertyObject={[keyinProperty]:string;}

instanceof

它是一个内置类型守卫，可用于检查一个值是否是给定构造函数或类的实例。

有了这个类型守卫，我们可以测试一个对象或值是否派生自一个类，这对于确定实例类型的类型很有用。

instanceof 关键字的基本语法如下：

objectVariable instanceof ClassName;

一个 instanceof 的例子，如下代码所示：

interfaceAccessory{brand:string;}// implements// 实现，一个新的类，从父类或者接口实现所有的属性和方法，同时可以重写属性和方法，包含一些新的功能// 一个类通过关键字implements声明自己使用一个或者多个接口。classNecklaceimplementsAccessory{kind:string;brand:string;constructor(brand:string,kind:string){this.brand=brand;this.kind=kind;}}classbraceletimplementsAccessory{brand:string;year:number;constructor(brand:string,year:number){this.brand=brand;this.year=year;}}constgetRandomAccessory=()=>{returnMath.random()<0.5?newbracelet('cartier',2021):newNecklace('choker','TASAKI');}letAccessory=getRandomAccessory();if(Accessoryinstanceofbracelet){console.log(Accessory.year);}if(AccessoryinstanceofNecklace){console.log(Accessory.brand);}

上面的 getRandomAccessory 函数返回一个 Necklace 或 bracelet 对象，因为它们都实现了 Accessory 接口。

Necklace 和 bracelet 的构造函数签名是不同的，用 instanceof 比较两个构造函数签名可以有效地确定类型。

自定义类型保护的类型谓词

这种自定义的方式更加灵活，如下代码所示：

// 验证是否是number类型functionisNumber(x:any):xisnumber{returntypeofx==="number";}// 验证是否是string类型functionisString(x:any):xisstring{returntypeofx==="string";}

调用函数传入参数（any 任意类型），如果类型正确则返回 true，反之 false。