「TypeScript」类型守卫(TypeGuard)🍃

一、简介

TypeScript中的类型守卫(Type Guards)是一种技术,它可以用于在代码中更明确地指定变量的类型。这是TypeScript提供的一种强大功能,因为它可以帮助开发者避免类型错误,同时还能利用TypeScript的类型系统来提供更好的代码智能提示和自动补全。类型守卫主要用于告诉TypeScript编译器,某个变量在特定的代码块中是特定的类型。

二、使用场景

类型守卫一般要配合if语句,在if语句创建的块级作用域中收窄对应变量的类型。当然也可以使用三目运算符、逻辑与运算符等使用。

1. 区分联合类型

typescript 复制代码
function process(input: string | number) {
  if (typeof input === "string") {
    // do something...
  } else {
    // do something...
  }
}

2. 收窄类型

typescript 复制代码
function move(animal: Animal) {
  if (animal instanceof Bird) {
    animal.fly();
  } else if (animal instanceof Fish) {
    animal.swim();
  } else {
    // do something...
  }
}

3. 处理未知类型

typescript 复制代码
function move(animal: unknown) {
  // do something...
}

三、写法

1. "instanceof " 操作符

当你想要检查一个对象是否是某个类的实例时,可以使用instanceof

typescript 复制代码
abstract class Animal {
  abstract makeSound(): void;
}

abstract class Fish extends Animal {
  abstract swim(): void;
}

abstract class Bird extends Animal {
  abstract fly(): void;
}

class Shark extends Fish {
  makeSound() {
    console.log("Shark make sound");
  }

  swim() {
    console.log("Shark swim");
  }
}

class Eagle extends Bird {
  makeSound() {
    console.log("Eagle make sound");
  }

  fly() {
    console.log("Eagle fly");
  }
}

function getMovement(animal: Animal) {
  if (animal instanceof Fish) {
    // 在这个作用域(if创建的作用域)中,animal 被收窄为 Fish
    return animal.swim();
  }

  if (animal instanceof Bird) {
    // 在这个作用域(if创建的作用域)中,animal 被收窄为 Bird
    return animal.fly();
  }
}

2. "in" 操作符

这种方式主要用于检查一个具有特定属性的对象。

typescript 复制代码
abstract class Animal {
  abstract makeSound(): void;
}

abstract class Fish extends Animal {
  abstract swim(): void;
}

abstract class Bird extends Animal {
  abstract fly(): void;
}

class Shark extends Fish {
  makeSound() {
    console.log("Shark make sound");
  }

  swim() {
    console.log("Shark swim");
  }
}

class Eagle extends Bird {
  makeSound() {
    console.log("Eagle make sound");
  }

  fly() {
    console.log("Eagle fly");
  }
}

function getMovement2(animal: Animal) {
  if ("swim" in animal) {
    return animal.swim();
  }

  if ("fly" in animal) {
    return animal.fly();
  }
}

3. 自定义类型守卫

在复杂的应用中,可能需要基于特定逻辑来确定变量的类型,此时可以创建自定义的类型守卫。通过类型谓词"is" 实现变量类型的收窄。

typescript 复制代码
abstract class Animal {
  abstract makeSound(): void;
}

abstract class Fish extends Animal {
  abstract swim(): void;
}

abstract class Bird extends Animal {
  abstract fly(): void;
}

class Shark extends Fish {
  makeSound() {
    console.log("Shark make sound");
  }

  swim() {
    console.log("Shark swim");
  }
}

class Eagle extends Bird {
  makeSound() {
    console.log("Eagle make sound");
  }

  fly() {
    console.log("Eagle fly");
  }
}

function isAccurateAnimal<T extends Animal>(
  animal: unknown,
  type: abstract new (...args: any[]) => T
): animal is T {
  return animal instanceof type;
}

function getMovement(animal: Animal) {
  if (isAccurateAnimal(animal, Fish)) {
    animal.swim();
  }

  if (isAccurateAnimal(animal, Bird)) {
    animal.fly();
  }
}

自定义类型守卫传入需要收窄类型的变量,并定义相应的收窄类型,返回布尔值的结果,当结果为真则变量的类型收窄为定义的类型,反之不进行收窄。

typescript 复制代码
function narrowType(object: unknown): object is [NarrowedType] {
  return [condition]
}
相关推荐
向上的车轮15 小时前
熟悉C#如何转TypeScript?
开发语言·typescript·c#
We་ct16 小时前
LeetCode 153. 旋转排序数组找最小值:二分最优思路
前端·算法·leetcode·typescript·二分·数组
紫_龙18 小时前
最新版vue3+TypeScript开发入门到实战教程之路由详解二
前端·javascript·typescript
吴声子夜歌19 小时前
TypeScript——VSCode搭建开发环境
javascript·vscode·typescript
abigale031 天前
【浏览器 API / 网络请求 / 文件处理】前端文件上传全流程:从基础上传到断点续传
前端·typescript·文件上传·vue cli
kyriewen111 天前
给浏览器画个圈:CSS contain 如何让页面从“卡成PPT”变“丝滑如德芙”
开发语言·前端·javascript·css·chrome·typescript·ecmascript
We་ct1 天前
LeetCode 34. 在排序数组中查找元素的第一个和最后一个位置:二分查找实战
前端·算法·leetcode·typescript·二分
__雨夜星辰__2 天前
TypeScript 入门学习笔记(面向对象 + 常用设计模式)
前端·学习·typescript
liangbm32 天前
AI-ViewNote:把网课和会议视频自动卷成结构化笔记
ai·typescript·go·软件构建·开源软件·react·桌面软件
大家的林语冰2 天前
TypeScript 6 官宣,JS “最后之舞“,版本升级踩雷指南
前端·javascript·typescript