TypeScript技术系列10：如何有效地保障类型的安全性？

黑土豆
922 阅读8分钟

前言

在TypeScript中，类型守卫（Type Guards）是一个重要的概念，它允许我们在代码中根据条件判断来缩小变量的类型，从而安全地操作它们。这种功能在处理联合类型和复杂业务逻辑时尤为实用。本文将深入探讨类型守卫的应用场景和实现方式，以帮助我们更好地掌握这一重要技能。

1、为什么需要类型守卫？

JavaScript是一种动态类型语言，变量的类型可以在运行时变化，这为开发者带来了极大的灵活性，但也可能引发一些潜在的问题。在JavaScript中，我们经常会编写多态的代码，比如函数可以接收不同类型的参数。为了确保这些代码在运行时的安全性，往往需要在运行时区分变量的具体类型，以便在操作之前先进行类型判断。

TypeScript作为JavaScript的超集，提供了静态类型检查的能力。通过类型守卫，我们可以在编译时确保在进入分支之前就已经知道变量的类型，这不仅提升了代码的可读性，也能有效避免运行时错误。

2、TypeScript 类型守卫的基本概念

类型守卫是一些特殊的语法结构或条件判断语句，它们在代码执行中可以帮助TypeScript分辨变量的具体类型。借助类型守卫，TypeScript能够在特定的分支下进一步“缩小”变量的类型范围。这一特性被称为类型缩小（Type Narrowing），它可以避免错误的类型操作，从而提高代码的健壮性和可靠性。

类型守卫的常用方式主要有以下几种：

  1. typeof：用于判断基础类型。
  2. instanceof：用于判断对象的构造函数。
  3. in：用于判断对象是否具有某个属性。
  4. 字面量恒等判断：使用===判断具体的字面量值。
  5. switch语句：用于判断可枚举的联合类型。
  6. 自定义类型守卫：使用类型谓词定义更复杂的类型守卫。

接下来，我们将逐一讨论这些类型守卫的具体应用，并辅以实际示例代码。

3、常见的类型守卫方式

3.1 typeof 类型守卫

typeof是JavaScript中的原生操作符，通常用于判断一个变量的基础类型（比如number、string、boolean等）。在TypeScript中，我们可以利用typeof来确保代码在运行时操作时的类型安全。

示例：假设要编写一个函数formatInput，它可以接收数字和字符串作为参数，分别执行不同的处理操作。

function formatInput(input: number | string): string {
  if (typeof input === 'string') {
    return input.trim(); // 类型缩小为 string
  } else if (typeof input === 'number') {
    return input.toFixed(2); // 类型缩小为 number
  }
  return '';
}

console.log(formatInput(123.456)); // 输出：'123.46'
console.log(formatInput("   Hello World!   ")); // 输出："Hello World!"

在上面的代码中，typeof input === 'string'判断使得input在该分支内被视为string类型，而typeof input === 'number'则将input的类型缩小为number。这种类型缩小在静态检查时避免了不必要的错误提示。

3.2 instanceof 类型守卫

instanceof操作符用于检测某个对象是否是特定类的实例。当我们处理的联合类型包含类类型时，可以使用 instanceof进行类型判断。

示例：假设有两个类Dog和Cat，它们都有不同的行为。希望写一个getAnimalSound函数，根据传入的动物对象类型返回对应的叫声。

class Dog {
  bark() {
    return "Woof!";
  }
}

class Cat {
  meow() {
    return "Meow!";
  }
}

function getAnimalSound(animal: Dog | Cat): string {
  if (animal instanceof Dog) {
    return animal.bark(); // 类型缩小为 Dog
  } else if (animal instanceof Cat) {
    return animal.meow(); // 类型缩小为 Cat
  }
  return '';
}

const dog = new Dog();
const cat = new Cat();
console.log(getAnimalSound(dog)); // 输出："Woof!"
console.log(getAnimalSound(cat)); // 输出："Meow!"

在上面的代码中，animal instanceof Dog判断使得animal的类型缩小为Dog，从而可以安全地调用bark方法。类似地，animal instanceof Cat判断使得animal的类型缩小为Cat，可以调用meow方法。

3.3 in 类型守卫

当联合类型包含接口或对象类型时，可以使用in操作符来判断对象是否具有某个属性，从而实现类型缩小。

示例：假设有两个接口Bird和Fish，它们具有不同的属性。希望编写一个getMovement函数，根据传入的对象类型返回其移动方式。

interface Bird {
  flySpeed: number;
}

interface Fish {
  swimSpeed: number;
}

function getMovement(animal: Bird | Fish): string {
  if ('flySpeed' in animal) {
    return `This animal flies at ${animal.flySpeed} km/h.`; // 类型缩小为 Bird
  } else if ('swimSpeed' in animal) {
    return `This animal swims at ${animal.swimSpeed} km/h.`; // 类型缩小为 Fish
  }
  return '';
}

const bird: Bird = { flySpeed: 20 };
const fish: Fish = { swimSpeed: 10 };

console.log(getMovement(bird)); // 输出："This animal flies at 20 km/h."
console.log(getMovement(fish)); // 输出："This animal swims at 10 km/h."

在上面的代码中，通过if ('flySpeed' in animal)判断，TypeScript能够将animal的类型缩小为Bird。类似地，通过if ('swimSpeed' in animal)判断，TypeScript将animal的类型缩小为Fish。

3.4 字面量恒等判断

字面量恒等判断通过===操作符对具体的字面量值进行判断，常用于联合类型包含特定字面量值的情况。该方式简单直观，适合于处理有限的、可枚举的值。

示例：假设有一个函数getColorHex，接收红色、绿色、蓝色三种颜色的字符串，并返回对应的十六进制值。

function getColorHex(color: 'red' | 'green' | 'blue'): string {
  if (color === 'red') {
    return '#FF0000';
  } else if (color === 'green') {
    return '#00FF00';
  } else if (color === 'blue') {
    return '#0000FF';
  }
  return '';
}

console.log(getColorHex('red'));   // 输出：'#FF0000'
console.log(getColorHex('green')); // 输出：'#00FF00'
console.log(getColorHex('blue'));  // 输出：'#0000FF'

在此代码中，每个条件判断使得color的类型被缩小为具体的字面量red、green或blue，从而能够根据类型执行相应的逻辑。

3.5 switch 语句

switch语句适用于多个分支的联合类型判断，通常比多个if-else判断更加清晰。当联合类型的成员可枚举时，使用switch能够让代码逻辑更简洁。

示例：假设要实现一个简单的shapeArea函数，计算不同形状（Circle、Square）的面积。

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

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

function shapeArea(shape: Circle | Square): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;
    case 'square':
      return shape.sideLength ** 2;
  }
}

const myCircle: Circle = { kind: 'circle', radius: 10 };
const mySquare: Square = { kind: 'square', sideLength: 5 };

console.log(shapeArea(myCircle));  // 输出：314.159...
console.log(shapeArea(mySquare));  // 输出：25

在上述代码中，switch (shape.kind)判断将shape的类型缩小为Circle或Square，从而可以安全地访问radius或sideLength属性。

3.6 自定义类型守卫

自定义类型守卫允许我们通过函数定义更复杂的类型判断逻辑，通常用于无法直接通过基础的typeof、instanceof、in等语法来区分类型的情况。自定义类型守卫函数的返回类型需要指定为一个类型谓词格式，例如param is Type。

示例：假设有两个接口Car和Bike，并希望通过自定义类型守卫来区分它们。

interface Car {
  kind: 'car';
  numberOfDoors: number;
}

interface Bike {
  kind: 'bike';
  hasPedals: boolean;
}

function isCar(vehicle: Car | Bike): vehicle is Car {
  return (vehicle as Car).numberOfDoors !== undefined;
}

function describeVehicle(vehicle: Car | Bike): string {
  if (isCar(vehicle)) {
    return `This car has ${vehicle.numberOfDoors} doors.`;
  } else {
    return `This bike ${vehicle.hasPedals ? 'has' : 'does not have'} pedals.`;
  }
}

const car: Car = { kind: 'car', numberOfDoors: 4 };
const bike: Bike = { kind: 'bike', hasPedals: true };

console.log(describeVehicle(car));  // 输出："This car has 4 doors."
console.log(describeVehicle(bike)); // 输出："This bike has pedals."

在此代码中，自定义类型守卫isCar检查vehicle是否具有numberOfDoors属性，以此来确定vehicle是Car类型。类型谓词vehicle is Car告诉TypeScript如果isCar函数返回true，则vehicle的类型可以缩小为Car。

4、如何在实际项目中使用类型守卫？

在实际开发中，类型守卫可以有效提升代码的类型安全性和可维护性。以下是一些常见的应用场景：

  1. API响应处理：处理API响应数据时，通常需要检查返回的数据结构。可以使用类型守卫来确保在处理数据之前验证其类型。
  2. 多态组件：在UI组件开发中，往往会根据不同的道具类型（props）来渲染不同的内容，通过类型守卫可以实现更灵活的组件逻辑。
  3. 复杂业务逻辑：在复杂业务场景中，类型守卫能够帮助开发者更精细地控制逻辑分支，减少不必要的类型检查。

总结

本文深入探讨了TypeScript类型守卫的基本概念和实现方式，包括typeof、instanceof、in、字面量恒等判断、switch语句和自定义类型守卫。掌握这些类型守卫方法可以让开发者在联合类型和复杂类型处理中更加得心应手，提升代码的安全性和可读性。在实际开发中，类型守卫不仅可以帮助我们减少运行时错误，还能让代码逻辑更加清晰合理。

希望通过本文的介绍，你能对TypeScript类型守卫有一个系统全面的理解，并能在实际项目中灵活应用。

后语

小伙伴们，如果觉得本文对你有些许帮助，点个👍或者➕个关注再走吧^_^ 。另外如果本文章有问题或有不理解的部分，欢迎大家在评论区评论指出，我们一起讨论共勉。

avatar
文章
阅读
粉丝