【TypeScript】`in` 和 `instanceof` 操作符的类型收窄详解

TypeScript 是 JavaScript 的超集，提供了强大的类型系统来帮助开发者编写更加健壮和可靠的代码。在开发过程中，我们常常需要通过某些特定的方式来收窄变量的类型，以便能够更好地操作它们。在 TypeScript 中，in 和 instanceof 是两种常见的操作符，它们不仅在 JavaScript 中有各自的功能，在 TypeScript 中还能用于类型收窄。本篇文章将详细介绍如何利用这些操作符在 TypeScript 中进行类型收窄。

一、in 操作符的类型收窄

1. in 操作符的基本概念

in 操作符用于检查某个属性是否存在于对象或其原型链中。TypeScript 基于此特性，实现了类型收窄。当你使用 "属性名" in 对象 进行检查时，如果检查通过，TypeScript 会认为该对象具有该属性的类型；否则，TypeScript 会收窄为不包含该属性的类型。

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

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

在上述代码中，animal 是 Fish | Bird 的联合类型。通过 in 操作符检查 "swim" in animal，如果为 true，TypeScript 会将 animal 的类型收窄为 Fish，否则收窄为 Bird。这种收窄方式允许开发者在不同的代码分支中，安全地调用特定类型的方法。

2. 可选属性与 in 操作符

值得注意的是，可选属性在 in 操作符检查中也会被考虑到。即使某个属性是可选的，TypeScript 仍会将其作为存在的可能性进行处理。

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

function move(animal: Fish | Bird | Human) {
  if ("swim" in animal) {
    animal; // 此时 animal 是 Fish 或 Human 类型
  } else {
    animal; // 此时 animal 是 Bird 或 Human 类型
  }
}

在这个例子中，Human 类型的 swim 和 fly 属性都是可选的。因此，在 in 操作符的检查结果中，TypeScript 会分别在两种分支中考虑 Human 的类型：swim 存在时，它是 Fish | Human；不存在时，它是 Bird | Human。

3. in 操作符的使用场景

in 操作符在处理联合类型时非常有用，特别是当你处理对象的某些属性可能不存在或具有多种可能类型的情况。例如，在处理表单数据或动态生成的对象时，in 操作符可以帮助你更清晰地定义代码逻辑：

type FormField = { value?: string; error?: string };

function handleField(field: FormField) {
  if ("value" in field) {
    console.log("Field has a value:", field.value);
  } else {
    console.log("Field does not have a value.");
  }
}

在这个例子中，我们可以通过 in 操作符检查 FormField 对象中是否存在 value 属性，从而安全地处理可选属性。

二、instanceof 操作符的类型收窄

1. instanceof 操作符的基本概念

在 JavaScript 中，instanceof 用于检查一个对象是否是某个构造函数的实例。TypeScript 扩展了这一功能，允许通过 instanceof 操作符对类型进行收窄。

function logValue(x: Date | string) {
  if (x instanceof Date) {
    console.log(x.toUTCString());  // x 被收窄为 Date 类型
  } else {
    console.log(x.toUpperCase());  // x 被收窄为 string 类型
  }
}

在此示例中，x 是 Date | string 的联合类型。通过 x instanceof Date，我们可以将 x 收窄为 Date 类型，从而调用 Date 对象的方法。同样地，在 else 分支中，x 被收窄为 string 类型，可以安全地调用 string 的方法。

2. instanceof 的使用场景

instanceof 操作符在处理基于类的对象时尤其有用。它允许开发者在运行时检查对象的实际类型，并根据不同类型执行不同的逻辑操作。

class Animal {
  move() { console.log("Moving along!"); }
}

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

function processAnimal(animal: Animal) {
  if (animal instanceof Dog) {
    animal.bark();  // animal 被收窄为 Dog 类型
  } else {
    animal.move();  // animal 保持为 Animal 类型
  }
}

在这个例子中，processAnimal 函数接收 Animal 类型的参数。通过 instanceof，我们可以将 animal 收窄为 Dog 类型，从而调用 Dog 类中特有的方法。否则，animal 将保持为 Animal 类型。

3. instanceof 与类的结合

TypeScript 的类型系统与 JavaScript 的类机制很好地结合在一起。利用 instanceof 操作符，开发者可以在类的继承关系中，根据对象的实际类型执行不同的操作。这在需要对多个子类进行区分时尤其有用。

class Bird {
  fly() { console.log("Flying!"); }
}

class Fish {
  swim() { console.log("Swimming!"); }
}

function move(animal: Bird | Fish) {
  if (animal instanceof Bird) {
    animal.fly();  // animal 被收窄为 Bird 类型
  } else {
    animal.swim();  // animal 被收窄为 Fish 类型
  }
}

通过 instanceof，我们可以在联合类型 Bird | Fish 中区分出不同的对象类型，并调用各自的方法。

三、赋值中的类型收窄

在 TypeScript 中，赋值操作也会触发类型收窄。当我们将值赋给一个变量时，TypeScript 会根据右侧的赋值表达式来收窄左侧变量的类型。这种类型收窄机制允许我们在代码中更精确地推断变量的类型。

let x = Math.random() < 0.5 ? 10 : "hello world!";
// x 的初始类型为 string | number

x = 1;  // x 被收窄为 number
console.log(x);

x = "goodbye!";  // x 被收窄为 string
console.log(x);

在这个例子中，x 的初始类型是 string | number，TypeScript 根据赋值操作收窄了 x 的类型。在后续代码中，x 的类型会随着赋值表达式的变化而动态调整。

声明类型与实际类型的区别

需要注意的是，尽管 x 在某些代码段中被收窄为特定类型，但 TypeScript 始终会检查与变量声明时的类型一致性。

let x = Math.random() < 0.5 ? 10 : "hello world!";
// x 的类型为 string | number

x = true;  // 报错，boolean 类型不属于 string | number

在这个例子中，x 的声明类型是 string | number，因此尝试赋值 boolean 类型会导致类型错误。

四、总结

in 和 instanceof 操作符是 TypeScript 中非常有用的类型收窄工具，它们分别用于检查对象属性的存在性和对象的实例关系。通过合理使用这些操作符，开发者可以更精确地控制类型推断，从而编写更加健壮的代码。此外，TypeScript 的赋值收窄机制也进一步增强了类型系统的灵活性，使得我们能够在开发过程中更安全地处理动态类型。

推荐：

• JavaScript
• react
• vue

---