类型保护 (Type Narrowing)

类型保护，也称为类型缩小（type narrowing），是 TypeScript 中一种通过控制流分析自动推断和限制变量类型的机制。它使得 TypeScript 编译器能够根据代码中的条件逻辑更准确地推断出变量的具体类型，从而提高代码的安全性和可读性。

类型保护的工作原理

当 TypeScript 编译器遇到某些特定的检查或操作时，它会自动缩小变量的类型范围。这通常发生在以下几种情况下：

• typeof 检查：用于基本类型的值。
• instanceof 检查：用于对象实例。
• 字面量类型检查：结合字面量类型和控制流分析来缩小类型范围。
• 属性存在性检查 (in 操作符)：用于检查对象是否具有某个属性。
• 赋值操作：通过赋值语句缩小联合类型的范围。
• 逻辑运算符（如 &&、||）：在条件表达式中使用时可以触发类型保护。

类型保护的具体应用场景

1. typeof 类型保护

typeof 操作符可以用来检查一个值是否为某种基本类型（如 string、number 或 boolean）。一旦确定了类型，TypeScript 编译器就会在这个范围内缩小该变量的类型。

function padLeft(value: string, padding: string | number) {
  if (typeof padding === "number") {
    return Array(padding + 1).join(" ") + value;
  }
  return padding + value;
}

在这个例子中，typeof padding === "number" 是一个类型保护，它告诉 TypeScript 在这个条件成立时，padding 的类型是 number。

2. 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(); // TypeScript knows animal is Dog here
  } else {
    animal.meow(); // TypeScript knows animal is Cat here
  }
}

在这个例子中，animal instanceof Dog 是一个类型保护，它告诉 TypeScript 在这个条件成立时，animal 的类型是 Dog。

3. 字面量类型与类型保护

结合字面量类型和控制流分析，可以使代码更加安全和精确。字面量类型可以与 if 语句或其他条件表达式一起使用，以缩小联合类型的范围。

function getPadding(value: string, padding: "left" | "right") {
  if (padding === "left") {
    return `Left padding: ${value}`;
  } else {
    return `Right padding: ${value}`;
  }
}

在这个例子中，padding === "left" 是一个类型保护，它告诉 TypeScript 在这个条件成立时，padding 的类型是 "left"。

4. in 操作符类型保护

in 操作符用于检查对象是否具有某个属性，可以作为类型保护的一部分来缩小联合类型的范围。

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

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

type Shape = Circle | Square;

function getArea(shape: Shape) {
  if ("radius" in shape) {
    return Math.PI * shape.radius ** 2; // TypeScript knows shape is Circle here
  } else {
    return shape.sideLength ** 2; // TypeScript knows shape is Square here
  }
}

在这个例子中，"radius" in shape 是一个类型保护，它告诉 TypeScript 在这个条件成立时，shape 的类型是 Circle。

5. 赋值操作类型保护

通过赋值操作，TypeScript 编译器也可以缩小联合类型的范围。

let value: string | null = "hello";

if (value !== null) {
  console.log(value.toUpperCase()); // TypeScript knows value is string here
}

在这个例子中，value !== null 是一个类型保护，它告诉 TypeScript 在这个条件成立时，value 的类型是 string。

6. 逻辑运算符类型保护

逻辑运算符（如 && 和 ||）可以在条件表达式中触发类型保护。

function example(x: string | undefined) {
  let s = x && x.toLowerCase(); // 如果 x 存在，则 x 是 string 类型
}

在这个例子中，x && 是一个类型保护，它告诉 TypeScript 在这个条件成立时，x 的类型是 string。

控制流分析中的类型保护

TypeScript 的控制流分析功能可以根据代码中的赋值和条件逻辑自动缩小变量的类型。例如：

let x: string | number = Math.random() > 0.5 ? "hello" : 42;

if (typeof x === "string") {
  console.log(x.toUpperCase()); // x is string here
} else {
  console.log(x.toFixed(2)); // x is number here
}

在这个例子中，TypeScript 编译器会自动根据 typeof 检查的结果来缩小 x 的类型范围，分别在两个分支中将 x 视为 string 和 number 类型。

类型守卫 vs 类型保护

特性	类型守卫 (Type Guards)	类型保护 (Type Narrowing)
定义	明确的条件或函数，用于缩小联合类型的范围	编译器根据代码逻辑自动缩小类型的机制
实现方式	typeof、instanceof、自定义类型守卫函数等	控制流分析、字面量类型检查、in 操作符等
作用范围	可以跨越多个文件或模块	主要限于当前函数或代码块内
示例	isBird(animal)	if (typeof x === "string")

注意事项

• 严格模式：确保你的项目启用了严格的编译选项（如 strict），以便充分利用类型保护带来的好处。

• 性能考虑：虽然类型保护提高了类型安全性，但在某些情况下可能会引入额外的编译开销。不过，通常这种影响是可以忽略不计的。

• 灵活性：虽然类型保护提供了强大的类型约束，但也要注意不要过度使用它们，以免限制代码的灵活性。

总结

类型保护是 TypeScript 提供的一个强大工具，它允许编译器根据代码逻辑自动缩小变量的类型范围，从而提高代码的安全性和可读性。理解如何利用 typeof、instanceof、in 操作符以及字面量类型等手段实现类型保护，可以帮助你在编写代码时充分利用 TypeScript 的静态类型检查能力。