TypeScript 类型守卫：typeof、instanceof 与自定义类型守卫实现

1. 类型守卫：为什么我们需要它？

在TypeScript的世界里，类型系统是我们的好朋友，它帮我们在编译阶段就发现潜在的错误。但有时候，这个好朋友会变得有点"固执"——当我们从外部获取数据或者处理动态内容时，TypeScript并不能总是准确地推断出变量的类型。

想象一下这样的场景：你从API获取了一个数据，可能是字符串，也可能是数字，TypeScript只知道它是any或者联合类型。这时候如果你直接调用字符串的方法，TypeScript会紧张地提醒你："嘿，这可能不是字符串哦！"这就是类型守卫大显身手的时候了。

类型守卫本质上是一些表达式，它们会在运行时检查类型，并帮助TypeScript在特定代码块中缩小变量的类型范围。就像给你的代码加上了一道安全门，确保只有正确的类型才能通过。

2. 基础类型守卫：typeof

typeof是最简单直接的类型守卫方式，它适合用来判断基本类型：string、number、boolean、symbol、undefined、function和bigint。

// 技术栈：TypeScript 4.0+

function processValue(value: string | number) {
    // 使用typeof缩小类型范围
    if (typeof value === 'string') {
        // 在这个块中，TypeScript知道value是string类型
        console.log(value.toUpperCase()); // 可以安全调用字符串方法
    } else {
        // 这里value只能是number类型
        console.log(value.toFixed(2)); // 可以安全调用数字方法
    }
}

// 测试用例
processValue("hello"); // 输出: "HELLO"
processValue(3.14159); // 输出: "3.14"

typeof有几个需要注意的地方：

• 它只能识别基本类型，对于数组、对象等复杂类型，typeof会返回"object"
• 对于null，typeof也会返回"object"，这是JavaScript的历史遗留问题
• 它不能区分不同的自定义类或接口

3. 实例类型守卫：instanceof

当我们需要检查更复杂的对象类型，特别是自定义类的实例时，instanceof就派上用场了。

// 技术栈：TypeScript 4.0+

class Car {
    drive() {
        console.log("Driving a car...");
    }
}

class Truck extends Car {
    loadCargo() {
        console.log("Loading cargo...");
    }
}

function useVehicle(vehicle: Car) {
    vehicle.drive();
    
    // 使用instanceof检查具体类型
    if (vehicle instanceof Truck) {
        // 在这个块中，TypeScript知道vehicle是Truck类型
        vehicle.loadCargo(); // 可以安全调用Truck特有方法
    }
}

// 测试用例
const myCar = new Car();
const myTruck = new Truck();

useVehicle(myCar);   // 只输出: "Driving a car..."
useVehicle(myTruck); // 输出: "Driving a car..." 和 "Loading cargo..."

instanceof的注意事项：

• 它通过检查原型链来确定类型，所以对继承关系很有效
• 只适用于类实例，不适用于接口或普通对象
• 在跨frame或跨realm的情况下可能会失效

4. 自定义类型守卫：类型谓词

有时候，我们需要更灵活的类型检查逻辑，这时候就可以使用自定义类型守卫——类型谓词（type predicate）。

// 技术栈：TypeScript 4.0+

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

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

type Shape = Circle | Square;

// 自定义类型守卫函数
function isCircle(shape: Shape): shape is Circle {
    return shape.kind === "circle";
}

function calculateArea(shape: Shape) {
    if (isCircle(shape)) {
        // 这里shape被确定为Circle类型
        return Math.PI * shape.radius ** 2;
    } else {
        // 这里shape被确定为Square类型
        return shape.sideLength ** 2;
    }
}

// 测试用例
const myCircle: Circle = { kind: "circle", radius: 5 };
const mySquare: Square = { kind: "square", sideLength: 4 };

console.log(calculateArea(myCircle)); // 输出: ~78.54
console.log(calculateArea(mySquare)); // 输出: 16

自定义类型守卫的强大之处在于：

• 你可以定义任何复杂的判断逻辑
• 特别适合处理接口和复杂对象
• 可以复用检查逻辑，保持代码DRY（Don't Repeat Yourself）

5. 进阶技巧：联合类型守卫

在实际开发中，我们经常需要处理更复杂的联合类型。这时候可以结合多种守卫方式来确保类型安全。

// 技术栈：TypeScript 4.0+

interface Admin {
    name: string;
    privileges: string[];
    role: "admin";
}

interface Employee {
    name: string;
    startDate: Date;
    role: "employee";
}

type UnknownUser = Admin | Employee | string | null;

// 复杂的类型守卫函数
function isEmployee(user: UnknownUser): user is Employee {
    return typeof user === "object" && user !== null && "role" in user && user.role === "employee";
}

function processUser(user: UnknownUser) {
    if (user === null) {
        console.log("User is null");
    } else if (typeof user === "string") {
        console.log(`User is a string: ${user.toUpperCase()}`);
    } else if (isEmployee(user)) {
        console.log(`Employee ${user.name} started on ${user.startDate.toISOString()}`);
    } else {
        // 这里user只能是Admin类型
        console.log(`Admin ${user.name} has privileges: ${user.privileges.join(", ")}`);
    }
}

// 测试用例
processUser(null); // 输出: "User is null"
processUser("guest"); // 输出: "User is a string: GUEST"
processUser({ 
    name: "Alice", 
    startDate: new Date(), 
    role: "employee" 
}); // 输出员工信息
processUser({ 
    name: "Bob", 
    privileges: ["create", "delete"], 
    role: "admin" 
}); // 输出管理员信息

6. 应用场景分析

类型守卫在实际项目中有广泛的应用场景：

1. API响应处理：当从后端API获取数据时，通常需要验证数据的形状是否符合预期
2. 表单验证：处理用户输入时，需要区分不同类型的输入值
3. 状态管理：在Redux或类似状态管理中，区分不同的action类型
4. 配置处理：处理可能有多种形式的配置对象
5. 插件系统：验证第三方插件是否符合预期的接口

7. 技术优缺点对比

让我们比较一下几种类型守卫方式的优缺点：

8. 注意事项与最佳实践

在使用类型守卫时，有几个重要的注意事项：

1. 性能考虑：复杂的自定义守卫可能会影响性能，特别是在热路径中
2. 过度使用：不是所有地方都需要类型守卫，只在必要时使用
3. 测试覆盖：自定义守卫应该被充分测试，因为它直接影响类型安全
4. 文档说明：复杂的守卫逻辑应该添加文档说明
5. 组合使用：可以组合多种守卫方式达到最佳效果

最佳实践建议：

• 优先使用简单的typeof和instanceof
• 对于复杂逻辑，创建良好命名的自定义守卫函数
• 保持守卫逻辑的单一职责
• 考虑将守卫函数集中管理，便于维护

9. 总结

TypeScript的类型守卫是我们类型安全工具箱中的重要工具。从简单的typeof检查到复杂的自定义类型谓词，它们帮助我们编写既灵活又类型安全的代码。

记住，类型守卫不是非此即彼的选择，你可以根据具体情况混合使用它们。在简单的场景中使用基础守卫，在复杂场景中构建精心设计的自定义守卫，这样你就能在TypeScript的世界中游刃有余。

最重要的是，类型守卫应该使你的代码更清晰、更安全，而不是更复杂。当你发现自己在重复编写相同的类型检查逻辑时，就是考虑提取为自定义守卫的好时机。