TypeScript类型保护机制详解：从基础到高级用法

TypeScript类型保护机制概述

在编写 TypeScript 代码时，编译器执行的操作远超表面所见，其中类型保护机制便是关键一环。该机制旨在使代码逻辑更加严谨，具体实现原理如下文所述。

得益于这些机制，即使开发者沿用 JavaScript 的原生编码风格，系统也能协助提前识别潜在问题。这对于认为 TypeScript 语法过于复杂的用户而言，实现了零门槛过渡，无需改变既有编码习惯即可享受静态类型检查带来的益处。

类型保护本质上是一类表达式，它们在运行时执行检查，以确保在特定作用域内变量的类型符合预期。

联合类型与类型保护的必要性

为便于理解，首先定义一个联合类型作为示例基础：

interface Bird {
 fly(): any;
 layEggs(): any;
}

interface Fish {
 swim(): any
 layEggs(): any
}

type Pet = Bird | Fish;

未应用类型保护时的报错情况

function fn(pet: Pet) { 
 pet.layEggs(); // okay
 pet.swim();  // Error: Property 'swim' does not exist on type 'Bird | Fish'.
}

由于 TypeScript 无法确定 pet 实例具体属于 Bird 还是 Fish，出于保守策略，在未进行手动类型声明前，TypeScript 仅允许调用联合类型中共有的方法。示例中 layEggs() 为共有方法，因此可以调用。若需调用特定类型独有的属性或方法，必须在使用前明确告知 TypeScript 该对象的具体类型。

类型断言及其局限性

通过类型断言实现类型保护

此处需使用 <Fish>pet 这种类型断言语法，向 TypeScript 明确指定目标对象的类型：

function fn(pet: Fish | Bird) {
 if ((<Fish>pet).swim) {
  (<Fish>pet).swim();
 } else {
  (<Bird>pet).fly();
 }
}

尽管此类断言能满足功能需求，但代码冗余且不便维护，需在多处重复引用。 备注：在编写 .tsx 文件时，需将 (<Fish>pet) 改写为 (pet as Fish)，因为在 JSX/TSX 环境中尖括号 <> 具有特殊解析含义。

使用 is 谓语封装类型保护

在函数中使用 is 关键字定位类型

将上述 if 判断逻辑封装为独立函数，可获得更便捷的类型保护方式。此函数必须采用 parameterName is Type 形式的类型谓语：

function isFish<T>(pet: Fish | Bird): pet is Fish {
 return !!(<Fish>pet).swim;
}

该函数必须返回 boolean 类型方可生效。当返回 true 时，类型被定位为 Fish；当返回 false 时，类型被定位为除 Fish 之外的其他联合类型成员。

function fn(pet: Fish | Bird ) { 
 if (isFish(pet)) {
  pet.swim(); // 因 is 语句的生效，此语句块中类型 let pet: Fish
 } else {
  pet.fly(); // 排除 Fish 之外的类型，此语句块中类型 let pet: Bird
 }
}

需注意，类型保护不仅作用于 if 语句块内部，TypeScript 还能自动推断出 else 分支中的具体类型。

即使不使用 TypeScript 特定的高级语法，开发者依然能受益于类型保护机制，接下来我们将具体探讨。

typeof 与 instanceof 的类型保护应用

使用 typeof 进行类型保护

若子类型仅为 number、string、boolean 或 symbol 这几种基本数据类型，可直接使用 typeof 关键字。TypeScript 能够据此检测并提供类型保护，此处直接引用官方示例：

function padLeft(value, padding): string {
  if (typeof padding === "number") {
    return Array(padding + 1).join(" ") + value;  // let padding: number
  }
  else {
    return padding + value;  // let padding: string
  }
}
  
const t1 = padLeft("world", 6);    // "   world"
const t2 = padLeft("world", "hello "); // "hello world"

使用 instanceof 进行类型保护

随着前端面向对象开发项目日益增多，类的引用场景也随之增加。此时类型保护显得尤为重要，我们可以利用 instanceof 来实现这一效果：

interface IA { x(): void; }
interface IB { y(): void; }

class A implements IA {
 x() { }
}
class B implements IB {
 y() { }
}

function fn(e: A | B) {
 if (e instanceof A)
  e.x(); // let e: A
 else
  e.y(); // let e: 
}

基于类型保护机制，在相应的语句块中，编辑器会提供指定类型的详细方法提示，并在类型检测阶段给予用户明确反馈。

以上即为本文的全部内容，希望对各位的学习有所帮助，也欢迎大家继续支持本站。