类型守卫与类型推断

在 TypeScript 开发中，类型系统的核心价值在于在编译阶段捕获潜在错误，而类型守卫与类型推断是实现这一目标的关键机制。它们共同作用于类型识别过程，前者帮助开发者主动收窄变量类型范围，后者则体现 TypeScript 自动分析类型的能力，二者结合可显著提升代码的类型安全性与开发效率。

类型守卫：主动收窄类型范围

类型守卫是一类特殊的表达式，其作用是在运行时检查变量类型，并通过类型谓词（Type Predicate）告知 TypeScript 编译器当前变量的具体类型，从而实现类型范围的精确收窄。根据应用场景的不同，类型守卫可分为自定义类型谓词、typeof 操作符和 instanceof 操作符三种主要形式。

自定义类型谓词是处理复杂类型判断的核心工具，尤其适用于联合类型中区分不同成员类型的场景。其语法通过 parameter is Type 形式的返回值注解实现，使函数不仅执行运行时检查，还能为编译器提供类型信息。例如，当需要区分 Fish 和 Bird 两种类型时：

typescript

复制代码

interface Fish {
  swim: () => void;
}

interface Bird {
  fly: () => void;
}

// 自定义类型守卫函数，通过类型谓词明确返回类型信息
function isFish(animal: Fish | Bird): animal is Fish {
  return 'swim' in animal; // 运行时检查是否存在 swim 方法
}

在上述代码中，animal is Fish 即为类型谓词，它告诉 TypeScript：当函数返回 true 时，参数 animal 的类型可被收窄为 Fish。此后，在条件分支中使用 isFish 判断后，TypeScript 会自动将 animal 视为 Fish 类型，从而支持安全调用 swim 方法。

typeof 操作符则适用于基础类型（string、number、boolean、symbol）的判断，其返回值为表示类型的字符串（如 'string'、'number'）。例如：

typescript

复制代码

function formatValue(value: string | number): string {
  if (typeof value === 'string') {
    return value.toUpperCase(); // TypeScript 推断 value 为 string
  } else {
    return value.toFixed(2); // TypeScript 推断 value 为 number
  }
}

需注意的是，typeof null 会返回 'object'，因此在处理可能为 null 的值时需额外判断。

instanceof 操作符主要用于判断类实例的类型，其原理是检查对象的原型链是否包含构造函数的 prototype 属性。例如：

typescript

复制代码

class DateValue {
  private value: Date;
  constructor(date: Date) {
    this.value = date;
  }
}

class StringValue {
  private value: string;
  constructor(str: string) {
    this.value = str;
  }
}

function getValueSource(value: DateValue | StringValue): string {
  if (value instanceof DateValue) {
    return 'Date instance'; // TypeScript 推断 value 为 DateValue
  } else {
    return 'String instance'; // TypeScript 推断 value 为 StringValue
  }
}

三种类型守卫的适用场景可总结如下：

类型守卫形式	适用场景	典型返回值/判断逻辑
自定义类型谓词	接口、联合类型成员区分	`parameter is Type` 形式的谓词
`typeof` 操作符	基础类型（string/number等）	`'string'`/`'number'` 等字符串
`instanceof` 操作符	类实例类型判断	构造函数原型链检查

类型推断：TypeScript 的自动类型分析能力

类型推断是 TypeScript 编译器根据代码上下文自动确定变量、函数返回值等类型的机制，它减少了显式类型注解的冗余，同时维持类型安全。这种能力主要体现在变量初始化、函数返回值推导等场景中。

变量初始化时的类型推断是最常见的场景。当变量声明时直接赋值，TypeScript 会根据赋值内容推断其类型。例如：

typescript

复制代码

let x = 10; // 推断为 number 类型
x = 'hello'; // 编译错误：不能将 string 赋值给 number

此处 x 被自动推断为 number 类型，后续赋值非 number 类型的值会触发编译错误。

函数返回值的类型推断则基于函数体中 return 语句的表达式类型。例如：

typescript

复制代码

function add(a: number, b: number) {
  return a + b; // 返回值被推断为 number 类型
}

const result = add(2, 3); // result 推断为 number 类型

尽管类型推断提升了开发效率，但显式类型注解的必要性不容忽视。在复杂场景下，推断结果可能与预期不符，导致潜在错误。例如：

typescript

复制代码

// 错误示例：推断结果与实际意图不符
function getValue(flag: boolean) {
  if (flag) {
    return 'hello'; // 可能被推断为 string
  } else {
    return 123; // 实际意图可能是 string | number 联合类型
  }
}

const value = getValue(false);
value.toFixed(2); // 编译通过但运行时错误：string 类型无 toFixed 方法

上述代码中，TypeScript 会将 getValue 的返回值推断为 string | number，但开发者若误判类型而调用 toFixed 方法，仍会导致运行时错误。此时，显式注解返回类型可强制开发者明确类型意图，避免推断偏差：

typescript

复制代码

// 正确示例：显式注解联合类型
function getValue(flag: boolean): string | number {
  if (flag) {
    return 'hello';
  } else {
    return 123;
  }
}

实战案例：数据格式化工具函数

结合类型守卫与类型推断，我们可实现一个根据输入类型返回不同格式的“数据格式化工具函数”。该函数需支持 string、number、object 三种输入类型，并分别返回大写字符串、保留两位小数的数字字符串、JSON 字符串格式。

typescript

复制代码

// 定义输入类型联合
type FormatInput = string | number | object;

function formatData(data: FormatInput): string {
  // 类型守卫：判断是否为 string 类型
  if (typeof data === 'string') {
    return data.toUpperCase(); // string 转为大写
  }

  // 类型守卫：判断是否为 number 类型
  if (typeof data === 'number') {
    return data.toFixed(2); // number 保留两位小数
  }

  // 类型守卫：判断是否为 object 类型（排除 null）
  if (typeof data === 'object' && data !== null) {
    return JSON.stringify(data, null, 2); // object 转为格式化 JSON
  }

  // 处理 null 等边缘情况
  return String(data);
}

// 使用示例
console.log(formatData('hello')); // "HELLO"
console.log(formatData(123.456)); // "123.46"
console.log(formatData({ name: 'TypeScript', version: '5.x' })); 
// 输出格式化 JSON：
// {
//   "name": "TypeScript",
//   "version": "5.x"
// }

在该案例中，通过 typeof 类型守卫依次区分 string、number 和 object 类型，确保每种类型的处理逻辑安全执行。特别注意对 object 类型的判断需排除 null（因 typeof null 返回 'object'），避免 JSON.stringify(null) 导致的非预期结果。

练习：修复类型宽泛导致的错误

类型宽泛（如使用 any 类型）会使 TypeScript 失去类型检查能力，导致潜在运行时错误。以下是一个典型案例，需通过类型守卫或显式注解修复：

typescript

复制代码

// 错误代码：类型宽泛导致编译通过但运行时错误
let data: any = 'hello'; // 使用 any 类型失去类型约束
data.toFixed(2); // 编译通过，但运行时错误：string 无 toFixed 方法

修复思路：

移除 any 类型，让 TypeScript 自动推断或显式注解为具体类型；
使用类型守卫判断实际类型后再调用对应方法。

修复方案：

typescript

复制代码

// 方案一：显式注解为 string 类型，直接暴露错误
let data: string = 'hello';
data.toFixed(2); // 编译错误：string 类型不存在 toFixed 方法（正确捕获错误）

// 方案二：若需支持多类型，使用联合类型 + 类型守卫
let data: string | number = 'hello';
if (typeof data === 'number') {
  data.toFixed(2); // 仅在 number 类型时调用 toFixed
} else {
  console.log(data.toUpperCase()); // string 类型调用 toUpperCase
}

通过上述修复，TypeScript 可在编译阶段捕获类型不匹配的错误，避免运行时异常。

核心要点总结：

类型守卫通过 typeof、instanceof 或自定义谓词收窄类型范围，确保类型安全操作；
类型推断减少冗余注解，但复杂场景需显式注解避免推断偏差；
避免使用 any 类型，通过联合类型与类型守卫处理多类型场景，维持 TypeScript 的类型检查能力。

类型守卫与类型推断的合理应用，是编写健壮 TypeScript 代码的基础。它们不仅提升了代码的可维护性，更将大量潜在错误提前至编译阶段解决，显著降低运行时异常风险。

泛型编程基础

高级类型工具