TypeScript 类型保护：typeof 和 instanceof 的实践

一、TypeScript 类型保护概述

在 TypeScript 开发中，类型保护是一种非常重要的机制，它允许我们在运行时检查变量的类型，从而确保在特定代码块内变量的类型是我们期望的类型。这有助于避免类型错误，提高代码的健壮性和可维护性。TypeScript 提供了多种类型保护的方式，其中 typeof 和 instanceof 是两种常见且实用的类型保护工具。

二、typeof 类型保护

基本原理 typeof 操作符在 JavaScript 中用于返回一个操作数的类型字符串。在 TypeScript 里，它同样可以用于类型保护。当我们使用 typeof 进行类型检查时，TypeScript 能够根据 typeof 的结果，在特定代码块内缩小变量的类型范围。

例如，typeof 操作符常见的返回值有 "string"、"number"、"boolean"、"function"、"object"、"undefined" 等。当我们在 if 语句或其他条件判断中使用 typeof 时，TypeScript 会基于判断结果进行类型推断。

针对基本类型的 typeof 类型保护
- 字符串类型

function printLength(value: string | number) {
    if (typeof value ==='string') {
        console.log(value.length);
    } else {
        console.log(value.toFixed(2));
    }
}
printLength('hello');
printLength(123);

在上述代码中，函数 printLength 接收一个 string | number 类型的参数 value。通过 typeof value ==='string' 这个类型保护判断，在 if 代码块内，TypeScript 能够确定 value 就是 string 类型，因此可以安全地访问 length 属性。而在 else 代码块内，value 被推断为 number 类型，可以调用 toFixed 方法。

- **数字类型**

function addOrConcat(a: string | number, b: string | number) {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    } else if (typeof a ==='string' && typeof b ==='string') {
        return a + b;
    } else {
        throw new Error('Type mismatch, cannot add or concatenate');
    }
}
console.log(addOrConcat(1, 2));
console.log(addOrConcat('a', 'b'));

此例中，addOrConcat 函数接受两个 string | number 类型的参数。通过 typeof 类型保护，我们可以根据参数的实际类型，进行加法运算（当两个参数都是数字时）或字符串拼接（当两个参数都是字符串时）。

针对函数类型的 typeof 类型保护

function callFunction(func: string | (() => void)) {
    if (typeof func === 'function') {
        func();
    } else {
        console.log(func);
    }
}
function greet() {
    console.log('Hello!');
}
callFunction('message');
callFunction(greet);

在 callFunction 函数中，参数 func 可能是字符串类型，也可能是函数类型。通过 typeof func === 'function' 这个类型保护，我们可以在 if 代码块内安全地调用 func 函数，而在 else 代码块内将 func 当作字符串处理。

typeof 类型保护在复杂场景中的应用
- 对象属性检查

interface User {
    name: string;
    age: number;
    email: string;
}
function processUser(user: User | string) {
    if (typeof user === 'object' && 'name' in user && 'age' in user && 'email' in user) {
        console.log(`Name: ${user.name}, Age: ${user.age}, Email: ${user.email}`);
    } else {
        console.log('Invalid user data:', user);
    }
}
const validUser: User = { name: 'John', age: 30, email: 'john@example.com' };
processUser(validUser);
processUser('not a user object');

这里，processUser 函数接受 User 类型或者字符串类型的参数。通过 typeof user === 'object' 首先判断是否为对象，再结合 in 操作符检查对象是否包含特定属性，以此作为类型保护，确保在处理对象时属性存在，避免运行时错误。

三、instanceof 类型保护

基本原理 instanceof 操作符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。在 TypeScript 中，instanceof 主要用于类的实例类型判断，帮助我们在运行时确定一个对象是否是某个类的实例，从而在特定代码块内缩小对象的类型范围。
简单类的 instanceof 类型保护示例

class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}
class Dog extends Animal {
    breed: string;
    constructor(name: string, breed: string) {
        super(name);
        this.breed = breed;
    }
}
function printAnimalDetails(animal: Animal | Dog) {
    if (animal instanceof Dog) {
        console.log(`This is a ${animal.breed} dog named ${animal.name}`);
    } else {
        console.log(`This is an animal named ${animal.name}`);
    }
}
const genericAnimal = new Animal('Generic Animal');
const myDog = new Dog('Buddy', 'Golden Retriever');
printAnimalDetails(genericAnimal);
printAnimalDetails(myDog);

在上述代码中，printAnimalDetails 函数接受 Animal 类型或 Dog 类型的参数。通过 animal instanceof Dog 类型保护，在 if 代码块内，TypeScript 能够确定 animal 是 Dog 类型，因此可以访问 breed 属性。而在 else 代码块内，animal 被推断为 Animal 类型。

结合接口的 instanceof 类型保护

interface HasName {
    name: string;
}
class Person implements HasName {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}
class Company implements HasName {
    name: string;
    employees: number;
    constructor(name: string, employees: number) {
        this.name = name;
        this.employees = employees;
    }
}
function printDetails(entity: HasName) {
    if (entity instanceof Person) {
        console.log(`Person: ${entity.name}, Age: ${entity.age}`);
    } else if (entity instanceof Company) {
        console.log(`Company: ${entity.name}, Employees: ${entity.employees}`);
    }
}
const person = new Person('Alice', 25);
const company = new Company('ABC Inc.', 100);
printDetails(person);
printDetails(company);

这里，printDetails 函数接受实现了 HasName 接口的对象。通过 instanceof 判断对象具体是 Person 类还是 Company 类的实例，进而进行不同的处理，利用类型保护获取更具体的对象信息。

instanceof 在继承体系复杂场景中的应用

class Shape {
    color: string;
    constructor(color: string) {
        this.color = color;
    }
}
class Rectangle extends Shape {
    width: number;
    height: number;
    constructor(color: string, width: number, height: number) {
        super(color);
        this.width = width;
        this.height = height;
    }
}
class Circle extends Shape {
    radius: number;
    constructor(color: string, radius: number) {
        super(color);
        this.radius = radius;
    }
}
function calculateArea(shape: Shape) {
    if (shape instanceof Rectangle) {
        return shape.width * shape.height;
    } else if (shape instanceof Circle) {
        return Math.PI * shape.radius * shape.radius;
    }
    return 0;
}
const rectangle = new Rectangle('red', 5, 10);
const circle = new Circle('blue', 3);
console.log(calculateArea(rectangle));
console.log(calculateArea(circle));

在这个图形相关的示例中，calculateArea 函数接受 Shape 类及其子类的实例。通过 instanceof 类型保护，我们可以根据具体的子类类型，执行相应的面积计算逻辑，准确处理不同类型的图形对象。

四、typeof 和 instanceof 的区别与选择

区别
- 适用类型不同：typeof 主要用于基本类型（如 string、number、boolean 等）和函数类型的判断，也能对对象进行一定程度的属性存在性检查。而 instanceof 专门用于类的实例类型判断，在继承体系中确定对象所属的具体类。
- 原理不同：typeof 基于操作数的类型返回字符串来进行判断，侧重于数据类型本身。instanceof 则是基于原型链来判断对象是否是某个类的实例，关注对象的继承关系。
选择原则
- 基本类型和函数：当需要判断变量是否为基本类型（如 string、number 等）或函数类型时，应使用 typeof。例如，在处理可能是字符串或数字的输入，或者判断一个变量是否为可调用的函数时，typeof 是合适的选择。
- 类的实例：如果涉及类的继承体系，需要确定一个对象是否是某个类的实例，以便访问特定类的属性和方法，那么 instanceof 是首选。比如在处理不同类型的图形对象（继承自同一个图形基类），判断具体是哪种图形实例时，instanceof 能很好地满足需求。

五、常见问题与注意事项

typeof 的局限性 虽然 typeof 对基本类型和函数类型判断很有效，但对于对象类型，typeof 返回的是 "object"，无法准确区分不同的对象类型。例如，typeof null 也返回 "object"，这是 JavaScript 早期设计的一个遗留问题。在 TypeScript 中，如果需要更精确地判断对象类型，除了结合 in 操作符检查属性外，对于类的实例应使用 instanceof。
instanceof 的注意事项
- 跨 iframe 问题：在浏览器环境中，如果涉及多个 iframe，不同 iframe 可能有各自独立的 JavaScript 上下文，这可能导致 instanceof 判断不准确。因为不同 iframe 中的类构造函数是不同的，即使它们看起来相同。解决这个问题可能需要更复杂的逻辑，比如使用唯一标识符来判断对象的类型。
- 类型兼容性：在 TypeScript 中，instanceof 只能用于类的实例判断，不能用于接口。接口是一种类型定义，在运行时不存在，所以不能使用 instanceof 来判断对象是否实现了某个接口。要检查对象是否符合接口类型，通常通过静态类型检查和属性存在性检查来实现。

六、总结与最佳实践

总结 typeof 和 instanceof 是 TypeScript 中强大的类型保护工具。typeof 适用于基本类型和函数类型的判断以及对象属性的存在性检查，而 instanceof 专注于类的实例类型判断，在继承体系中发挥重要作用。合理使用这两种类型保护机制，可以有效地避免类型错误，提高代码的可靠性和可维护性。
最佳实践
- 明确类型判断目的：在编写代码时，首先明确需要判断的是基本类型、函数类型还是类的实例类型，从而选择合适的类型保护工具。
- 结合其他工具：对于复杂的对象类型判断，可以结合 in 操作符、类型断言等其他 TypeScript 工具，以实现更精确的类型检查。
- 保持代码清晰：在使用 typeof 和 instanceof 时，尽量使代码逻辑清晰，避免过度嵌套和复杂的判断逻辑，以便于理解和维护。

通过深入理解和熟练运用 typeof 和 instanceof 的类型保护机制，前端开发者能够编写出更健壮、更安全的 TypeScript 代码，提升项目的整体质量。在实际开发中，不断积累经验，根据具体场景选择最合适的类型保护方式，是提高编程效率和代码质量的关键。