🎉 TypeScript 类型守卫(Type Guards)详解

什么是类型守卫?

类型守卫是 TypeScript 中用于缩小变量类型范围的机制,通过条件判断帮助编译器识别具体类型
例如:

function isString(value: any): value is string {
  return typeof value === 'string';
}

✅ 有效避免类型断言带来的安全隐患

常见类型守卫用法

  • typeof 检查原始类型

    if (typeof obj === 'object') { ... }
    
    TypeScript_Type_Guards
  • instanceof 验证对象实例

    if (value instanceof Date) { ... }
    
  • 类型谓词函数(如 isString 示例)

  • in 操作符 检查属性存在性

    if ('length' in value) { ... }
    

实战案例

interface Bird {
  fly(): void;
}
interface Fish {
  swim(): void;
}

function checkPet(pet: Bird | Fish) {
  if (pet.fly) { // 类型守卫
    pet.fly(); // 编译器自动识别为 Bird 类型
  } else {
    pet.swim(); // 自动识别为 Fish 类型
  }
}

推荐学习路径

  1. 先掌握 TypeScript 基础类型系统
  2. 深入理解 类型守卫高级技巧
  3. 实践 类型守卫在 React 中的应用

💡 使用类型守卫可以显著提升代码安全性和 IDE 的智能提示体验!