【TypeScript】Narrowing（类型缩小）详解

TypeScript 作为一门静态类型检查的编程语言，其核心目标之一是提升代码的可读性和安全性。在开发过程中，特别是在处理复杂的数据类型时，narrowing（类型缩小）是一个非常重要的概念。它允许开发者在运行时根据不同的条件对变量的类型进行“缩小”，从而使代码更加健壮和清晰。本文将深入探讨 TypeScript 的 Narrowing 概念，并结合代码示例进行说明。

一、Narrowing 的背景和概念

在 JavaScript 中，我们经常会遇到具有多种可能类型的变量。TypeScript 在这些情况下通过联合类型（union types）对多个类型进行声明。例如，考虑下面这个函数：

function padLeft(padding: number | string, input: string): string {
  throw new Error("Not implemented yet!");
}

在这个 padLeft 函数中，参数 padding 可以是数字，也可以是字符串。这种灵活性在 JavaScript 中很常见，但也带来了类型检查的复杂性。如果我们不正确处理这些类型，可能会导致潜在的运行时错误。

1. 什么是 Narrowing？

Narrowing 是 TypeScript 提供的一种机制，用于在代码中根据运行时的判断条件，将变量的类型从更广泛的联合类型“缩小”到更具体的类型。通过 Narrowing，TypeScript 能够在运行时确定变量的具体类型，从而帮助开发者编写类型安全的代码。

2. 为什么需要 Narrowing？

在联合类型的情况下，TypeScript 无法自动推断变量的具体类型。例如，在 padLeft 函数中，我们需要明确地判断 padding 是数字还是字符串，然后采取相应的处理。如果没有进行类型缩小操作，TypeScript 将无法正确处理变量的类型，从而导致编译错误。

function padLeft(padding: number | string, input: string): string {
  return " ".repeat(padding) + input;
}

在上述代码中，TypeScript 会报错，因为 repeat 方法只能应用于 number 类型，而 padding 的类型是 number | string，即联合类型。我们需要在使用 padding 之前先确认它是 number 类型。

二、如何实现类型缩小

要实现 Narrowing，我们可以通过条件语句（如 if、else）和 TypeScript 支持的类型守卫（type guards）来检查变量的类型，并根据类型缩小范围进行处理。

1. 使用 typeof 进行类型缩小

在 TypeScript 中，typeof 操作符是最常见的类型守卫之一。它可以用来检查运行时变量的基础类型，并根据结果执行不同的逻辑。修改后的 padLeft 函数如下：

function padLeft(padding: number | string, input: string): string {
  if (typeof padding === "number") {
    return " ".repeat(padding) + input;
  }
  return padding + input;
}

在这个例子中，typeof padding === "number" 是一个类型守卫（type guard），它告诉 TypeScript 在这个条件块中，padding 的类型已经缩小为 number。因此，repeat 方法可以安全地应用于 padding，而不会再引发类型错误。

2. 类型缩小的具体应用

Narrowing 的核心在于使用不同的类型检查方式，将联合类型变量缩小为某个具体类型。常见的缩小方式有以下几种：

• typeof 操作符：检查基本类型（例如 number、string、boolean 等）。
• instanceof 操作符：检查对象的构造函数类型。
• in 操作符：检查对象中是否存在某个属性。
• 字面量类型守卫：通过字面量值进行类型缩小。

3. 结合条件语句实现类型缩小

我们可以将类型守卫与条件语句结合使用，以在不同类型的情况下执行不同的逻辑。例如：

function printValue(value: string | number | boolean) {
  if (typeof value === "string") {
    console.log("String: " + value);
  } else if (typeof value === "number") {
    console.log("Number: " + value);
  } else {
    console.log("Boolean: " + value);
  }
}

在上述代码中，printValue 函数接受一个 string | number | boolean 类型的参数。通过使用 typeof 操作符，TypeScript 能够在不同的分支中将 value 的类型缩小为 string、number 或 boolean，从而确保每个分支中的操作都是安全的。

三、其他类型缩小方式

除了使用 typeof 之外，TypeScript 还支持其他几种类型缩小方式，适用于更复杂的类型判断场景。

1. 使用 instanceof 进行类型缩小

instanceof 操作符用于判断一个对象是否是某个类的实例。在面向对象编程中，这种方式非常常见。例如：

class Dog {
  bark() {
    console.log("Woof!");
  }
}

class Cat {
  meow() {
    console.log("Meow!");
  }
}

function makeSound(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    animal.meow();
  }
}

在这个例子中，instanceof 操作符帮助我们缩小 animal 的类型，使得 TypeScript 知道在 if 分支中，animal 是 Dog 类型，而在 else 分支中，animal 是 Cat 类型。

2. 使用 in 进行类型缩小

in 操作符用于检查对象中是否存在某个属性。这在联合类型涉及不同结构的对象时非常有用。例如：

type Fish = { swim: () => void };
type Bird = { fly: () => void };

function move(animal: Fish | Bird) {
  if ("swim" in animal) {
    animal.swim();
  } else {
    animal.fly();
  }
}

在这个例子中，in 操作符检查 animal 是否具有 swim 属性。如果有，TypeScript 会将 animal 的类型缩小为 Fish，否则它会缩小为 Bird。

四、Narrowing 中的常见错误与陷阱

尽管类型缩小在 TypeScript 中非常有用，但也有一些需要注意的地方。例如，typeof null 的返回值是 "object"，这可能会导致一些意外的行为。来看下面的例子：

function processValue(value: string | string[] | null) {
  if (typeof value === "object") {
    // TypeScript 提示 'value' 可能为 'null'
    for (const item of value) {
      console.log(item);
    }
  } else {
    console.log(value);
  }
}

尽管我们使用 typeof 检查 value 是否为 object，但 TypeScript 仍然会警告我们 value 可能是 null。这是因为在 JavaScript 中，typeof null 返回 "object"，所以我们必须显式地检查 value 是否为 null。

为了解决这个问题，我们可以进一步修改代码，加入对 null 的检查：

function processValue(value: string | string[] | null) {
  if (value !== null && typeof value === "object") {
    for (const item of value) {
      console.log(item);
    }
  } else {
    console.log(value);
  }
}

通过添加 value !== null 的检查，TypeScript 能够更准确地缩小 value 的类型，确保我们不会意外处理 null 值。

五、总结

TypeScript 的 Narrowing 是一个非常强大且灵活的功能，帮助开发者在处理多种类型时保持代码的安全性和可读性。通过类型守卫（如 typeof、instanceof、in 等）和条件判断，我们可以将广泛的联合类型缩小为更具体的类型，从而减少错误并提升代码的健壮性。

推荐：

• JavaScript
• react
• vue

---