TypeScript 中的类型守卫及其使用方法-JavaScript中文网-JavaScript教程资源分享门户

前言

随着近年来 TypeScript 的广泛应用，越来越多的前端开发者开始使用它来提高代码的可维护性和健壮性。除了 TypeScript 提供的强类型检查和智能代码提示之外，还有一项重要的功能——类型守卫（Type Guard）。在 TypeScript 中，类型守卫可以让我们更加精准地控制代码中的类型，在运行时避免出现错误，从而增强代码的可靠性。

本文将介绍 TypeScript 中的类型守卫，包括其基本概念、使用场景、具体实现及其应用示例。希望本文对 TypeScript 学习者能够有所帮助。

类型守卫的基本概念

在 TypeScript 中，类型守卫指的是用来检查某个变量或者表达式的类型的代码块，可以用来更加精准地控制代码中的类型。当类型守卫判断某个变量或表达式满足某个条件时，该变量或表达式的类型会被 TypeScript 推断为更加具体的类型，从而增强代码可读性和健壮性。

具体来说，类型守卫可以通过以下几种方式实现：

`typeof` 类型守卫

使用 typeof 操作符来检查某个表达式的类型是否属于某个基本类型。它的语法形式如下：

typeof expression === baseType

其中 expression 是待检查的表达式，baseType 是要检查的基本类型。

例如，我们可以使用 typeof 来判断一个数字变量是否为 number 类型：

function isNumber(value: any): value is number {
  return typeof value === 'number';
}

isNumber(123); // true
isNumber('123'); // false

`instanceof` 类型守卫

使用 instanceof 操作符来检查某个表达式是否是某个类的实例。它的语法形式如下：

expression instanceof ClassType

其中 expression 是待检查的表达式，ClassType 是某个类名，表示要检查的类型。

例如，我们可以使用 instanceof 来判断一个变量是否是 Date 类型的实例：

function isDate(value: any): value is Date {
  return value instanceof Date;
}

isDate(new Date()); // true
isDate('2021-08-01'); // false

自定义类型守卫

除了基本类型和类类型外，我们还可以自定义类型守卫，以更加精细地控制变量类型。

例如，可以使用以下代码来判断一个对象是否具有 name 属性：

// javascriptcn.com 代码示例
function hasNameProperty(obj: any): obj is {name: string} {
  return typeof obj === 'object' && typeof obj.name === 'string';
}

let user = {name: 'Jack'};
let animal = {color: 'brown'};

if(hasNameProperty(user)) {
  console.log(user.name); // "Jack"
}

if(hasNameProperty(animal)) {
  console.log(animal.name); // undefined
}

类型守卫的使用场景

在实际项目中，类型守卫可以用于以下场景：

函数参数类型检查

在编写函数时，我们通常要对参数进行类型检查，以避免传入错误的参数类型导致的错误。

例如，以下代码定义了一个函数 printName，用于输出用户的姓名：

function printName(user: {name: string}): void {
  console.log(user.name);
}

printName({name: 'Jack'}); // "Jack"
printName({name: 123}); // Error: Argument of type '{name: number}' is not assignable to parameter of type '{name: string}'.

可以看到，在第二次调用 printName 时，传入了不合法的参数类型，TypeScript 会报错并提示给出具体错误信息。

非空检查

有时候，我们需要在代码中判断某个变量是否为空，以避免运行时出现错误。可以使用 typeof 和自定义类型守卫配合使用，实现非空检查。

例如，以下代码定义了一个函数 getUser，用于从服务器获取用户信息，如果获取失败，则返回 null。

// javascriptcn.com 代码示例
function getUser(id: number): {id: number, name: string} | null {
  let user = {id: 123, name: 'Jack'};
  if(id === user.id) {
    return user;
  } else {
    return null;
  }
}

let user = getUser(123);
if(user !== null) {
  console.log(user.name); // "Jack"
} else {
  console.log('User not found.');
}

类型转换

有时候，我们需要在代码中对某个变量进行类型转换，以适应不同的应用场景。可以使用 instanceof 和自定义类型守卫配合使用，实现类型转换。

例如，以下代码定义了一个函数 getAnimal，用于获取动物实例。我们可以使用 instanceof 来判断返回值的类型，然后转换类型。

// javascriptcn.com 代码示例
class Cat {
  meow() {
    console.log('meow');
  }
}

class Dog {
  bark() {
    console.log('bark');
  }
}

function getAnimal(type: 'cat' | 'dog'): Cat | Dog {
  if(type === 'cat') {
    return new Cat();
  } else {
    return new Dog();
  }
}

let animal = getAnimal('dog');
if(animal instanceof Cat) {
  animal.meow();
} else if(animal instanceof Dog) {
  animal.bark();
}

总结

通过本文的介绍，我们了解了 TypeScript 中类型守卫的基本概念、使用场景、具体实现及其应用示例。在实际项目中，掌握类型守卫可以让我们更加精准地控制代码中的类型，在运行时避免出现错误，从而增强代码的可靠性。感谢您的阅读，希望对您的 TypeScript 学习有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65300bd27d4982a6eb16ae76

TypeScript 中的类型守卫及其使用方法

前言