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

前言

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

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

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

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

---

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

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

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

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

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

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

// 姓名(字符串类型) let uname: string = "王佳斌" // 判断其类型 console.log(typeof uname) //string in

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

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

// 示例一 const obj = { name: '王佳斌', age: 15 } console.log('name属性是否存在于obj对象?', 'name' in obj)//"name属性是否存在于obj对象?", true // 示例二 type Property = 'name' | 'age' | 'phoneNum'; type PropertyObject = { [key in Property]: string; } instanceof

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

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

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

objectVariable instanceof ClassName;

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

interface Accessory { brand: string; } // implements // 实现，一个新的类，从父类或者接口实现所有的属性和方法，同时可以重写属性和方法，包含一些新的功能 // 一个类通过关键字implements声明自己使用一个或者多个接口。 class Necklace implements Accessory{ kind: string; brand: string; constructor(brand: string, kind: string) { this.brand = brand; this.kind = kind; } } class bracelet implements Accessory{ brand: string; year: number; constructor(brand: string, year: number) { this.brand = brand; this.year = year; } } const getRandomAccessory = () =>{ return Math.random() < 0.5 ? new bracelet('cartier', 2021) : new Necklace('choker', 'TASAKI'); } let Accessory = getRandomAccessory(); if (Accessory instanceof bracelet) { console.log(Accessory.year); } if (Accessory instanceof Necklace) { console.log(Accessory.brand); }

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

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

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

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

// 验证是否是number类型 function isNumber(x: any): x is number { return typeof x === "number"; } // 验证是否是string类型 function isString(x: any): x is string { return typeof x === "string"; }

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

SEO

TypeScript类型守卫，ts 类型守卫是什么，ts类型守卫的方式教程，ts中的类型守卫是干啥的，typescript 类型守卫详细讲解教程，typescript类型守卫是什么?typescript类型守卫，TypeScript类型守卫的几种方式，ts的类型守卫入门教程，ts类型守卫简单的教程，Typescript - 类型守卫（typeof / in / instanceof / 自定义类型保护的类型谓词）通俗易懂详细教程。ts typeof 用法，ts in 用法，ts instanceof 关键字用法，ts 自定义类型保护的类型谓词。