TypeScript 中的类型守卫详解-JavaScript中文网-JavaScript教程资源分享门户

TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的一个超集，允许开发者使用强类型和面向对象的编程方式来编写 JavaScript 代码。TypeScript 的类型系统可以帮助开发者在编译时发现代码中的类型错误，从而提高代码的可靠性和可维护性。

在 TypeScript 中，类型守卫是一种用于判断变量类型的机制，可以帮助开发者在运行时检查变量的类型，从而避免类型错误和运行时异常。本文将详细介绍 TypeScript 中的类型守卫机制，包括类型谓词、类型保护函数和类型区分。

类型谓词

类型谓词是一种用于判断变量类型的语法结构，可以帮助开发者在运行时确定变量的类型。在 TypeScript 中，类型谓词通常用于函数参数的类型判断。下面是一个简单的例子：

// javascriptcn.com 代码示例
function isNumber(value: any): value is number {
  return typeof value === 'number';
}

function double(value: number | string): number | string {
  if (isNumber(value)) {
    return value * 2;
  } else {
    return value + value;
  }
}

console.log(double(2)); // 输出 4
console.log(double('hello')); // 输出 'hellohello'

在上面的例子中，我们定义了一个名为 isNumber 的类型谓词函数，它接受一个任意类型的参数 value，并返回一个布尔值。在 double 函数中，我们首先使用 isNumber 函数判断参数 value 是否为数字类型，如果是，则将其乘以 2，否则将其重复两次并返回。通过使用类型谓词函数，我们可以在运行时判断变量的类型并执行相应的操作。

类型保护函数

类型保护函数是一种用于判断变量类型的函数，它可以帮助开发者在运行时确定变量的类型，并返回一个布尔值或一个类型谓词。在 TypeScript 中，类型保护函数通常用于判断对象的类型。下面是一个简单的例子：

// javascriptcn.com 代码示例
interface Animal {
  name: string;
}

interface Dog extends Animal {
  bark(): void;
}

interface Cat extends Animal {
  meow(): void;
}

function isDog(animal: Animal): animal is Dog {
  return (animal as Dog).bark !== undefined;
}

function makeSound(animal: Animal) {
  if (isDog(animal)) {
    animal.bark();
  } else {
    animal.meow();
  }
}

在上面的例子中，我们定义了三个接口 Animal、Dog 和 Cat，分别表示动物、狗和猫。我们还定义了一个名为 isDog 的类型保护函数，它接受一个类型为 Animal 的参数 animal，并返回一个布尔值。在 makeSound 函数中，我们首先使用 isDog 函数判断参数 animal 是否为狗类型，如果是，则调用其 bark 方法，否则调用其 meow 方法。通过使用类型保护函数，我们可以在运行时判断对象的类型并执行相应的操作。

类型区分

类型区分是一种用于判断变量类型的机制，可以帮助开发者在编译时确定变量的类型，并执行相应的操作。在 TypeScript 中，类型区分通常用于判断变量的类型。下面是一个简单的例子：

// javascriptcn.com 代码示例
interface Circle {
  kind: 'circle';
  radius: number;
}

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

type Shape = Circle | Square;

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;
    case 'square':
      return shape.side ** 2;
  }
}

在上面的例子中，我们定义了两个接口 Circle 和 Square，分别表示圆形和正方形。我们还定义了一个名为 Shape 的联合类型，表示圆形和正方形的联合类型。在 getArea 函数中，我们使用 switch 语句判断参数 shape 的 kind 属性，从而确定其类型并执行相应的操作。通过使用类型区分，我们可以在编译时确定变量的类型，并执行相应的操作。

总结

本文介绍了 TypeScript 中的类型守卫机制，包括类型谓词、类型保护函数和类型区分。通过使用类型守卫机制，开发者可以在运行时判断变量的类型，并执行相应的操作，从而避免类型错误和运行时异常。同时，本文还提供了一些示例代码，帮助读者更好地理解 TypeScript 中的类型守卫机制。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65114dfc95b1f8cacd9bf734