TypeScript中的类型守卫（Type Guards）：精确控制类型检查

最新推荐文章于 2024-07-20 10:36:53 发布

逐星ing

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量274

点赞数 3

分类专栏： TypeScript 前端文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/qq_41791705/article/details/138996351

版权

前端同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

TypeScript

34 篇文章 0 订阅

订阅专栏

TypeScript中的类型守卫（Type Guards）：精确控制类型检查

引言

类型守卫是TypeScript中的一个特性，它允许你在使用特定的变量或属性之前，对变量的类型进行更精确的检查。这在处理联合类型或任何类型时特别有用，可以缩小变量的可能类型范围，从而提供更具体的类型信息给编译器。

基础知识

类型守卫通常通过自定义函数来实现，这些函数返回一个类型谓词，告知编译器某个变量的确切类型。

核心概念

类型谓词：用于断言一个变量的确切类型。
类型断言：用于告知编译器变量的确切类型，但不会进行类型检查。

示例演示

基本类型守卫：

function isString(value: any): value is string {
  return typeof value === 'string';
}

let myValue: any = "Hello";
if (isString(myValue)) {
  // 在这个块内，TypeScript知道myValue是string类型
  myValue.toLowerCase(); // 没有错误
}

类实例类型守卫：

class Bird {
  fly() {}
}

class Fish {
  swim() {}
}

function isBird(animal: Bird | Fish): animal is Bird {
  return (animal as Bird).fly !== undefined;
}

let pet = new Fish();
if (isBird(pet)) {
  pet.fly(); // 错误，因为pet现在是Bird类型
}

使用in操作符：

interface Bird {
  fly: () => void;
}

interface Fish {
  swim: () => void;
}

type Animal = Bird | Fish;

function act(animal: Animal) {
  if ('fly' in animal) {
    // 在这个块内，animal被缩小为Bird类型
    animal.fly();
  } else {
    // 在这个块内，animal被缩小为Fish类型
    animal.swim();
  }
}

实际应用

类型守卫在处理具有多种可能类型的大型对象时非常有用，它们允许你安全地访问只在某些类型上存在的属性或方法。

复杂的类型守卫：

interface Square {
  kind: 'square';
  size: number;
}

interface Rectangle {
  kind: 'rectangle';
  width: number;
  height: number;
}

interface Circle {
  kind: 'circle';
  radius: number;
}

type Shape = Square | Rectangle | Circle;

function getArea(s: Shape) {
  switch (s.kind) {
    case 'square':
      return s.size * s.size;
    case 'rectangle':
      return s.width * s.height;
    case 'circle':
      return Math.PI * s.radius ** 2;
    default:
      const _exhaustiveCheck: never = s;
      return _exhaustiveCheck;
  }
}