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

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

// 姓名(字符串类型)
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。

代码007普通

打赏 收藏 海报 链接