面试题：复杂场景下 TypeScript 类型保护与类型守卫的应用差异

类型保护与类型守卫的运用

类型保护

typeof 类型保护：在JavaScript中，可以使用typeof操作符来进行类型保护。例如，当一个接口可能有不同类型属性时：

interface StringOrNumber {
    value: string | number;
}

function printValue(obj: StringOrNumber) {
    if (typeof obj.value ==='string') {
        console.log(obj.value.toUpperCase());
    } else {
        console.log(obj.value.toFixed(2));
    }
}

这里typeof obj.value ==='string'就是一个类型保护，它确保在if块内obj.value是string类型。 2. instanceof 类型保护：用于判断一个对象是否是某个类的实例。假设项目中有类继承结构：

class Animal {}
class Dog extends Animal {}
class Cat extends Animal {}

function handleAnimal(animal: Animal) {
    if (animal instanceof Dog) {
        console.log('This is a dog');
    } else if (animal instanceof Cat) {
        console.log('This is a cat');
    }
}

animal instanceof Dog这种判断就是类型保护，能在特定块内明确对象类型。 3. 自定义类型保护函数：可以定义自己的类型保护函数。例如：

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

function isBird(animal: Bird | Fish): animal is Bird {
    return (animal as Bird).fly!== undefined;
}

function handleAnimal2(animal: Bird | Fish) {
    if (isBird(animal)) {
        animal.fly();
    } else {
        animal.swim();
    }
}

isBird函数就是自定义类型保护函数，通过返回animal is Bird来告诉TypeScript在if块内animal是Bird类型。

类型守卫

类型守卫是一种运行时检查机制，通过一些逻辑判断来缩小类型的范围。在复杂项目结构中，比如在多个接口继承与交叉类型的场景下，类型守卫与类型保护有相似之处，但更强调运行时的判断。

联合类型的类型守卫：当处理联合类型时，通过检查对象的属性来进行类型守卫。例如：

interface Shape {
    kind: string;
}
interface Circle extends Shape {
    kind: 'circle';
    radius: number;
}
interface Square extends Shape {
    kind:'square';
    sideLength: number;
}

function draw(shape: Circle | Square) {
    if (shape.kind === 'circle') {
        console.log(`Drawing a circle with radius ${shape.radius}`);
    } else {
        console.log(`Drawing a square with side length ${shape.sideLength}`);
    }
}

这里shape.kind === 'circle'就是一个类型守卫，通过kind属性判断shape具体是Circle还是Square类型。

优势分析

类型保护的优势

编译时检查：类型保护有助于TypeScript在编译时进行更准确的类型检查，提高代码的安全性和可维护性。例如在typeof类型保护中，编译器能明确if块内变量的类型，减少类型错误。
代码可读性：自定义类型保护函数能使代码逻辑更清晰，像isBird函数，从函数名就能看出它的作用，方便其他开发者理解代码意图。

类型守卫的优势

运行时灵活性：类型守卫在运行时进行判断，能根据实际情况动态处理不同类型，适用于一些在编译时无法完全确定类型的复杂场景。比如在上述draw函数中，根据运行时shape的kind属性决定如何绘制图形。
处理复杂继承与交叉类型：在多个接口继承与交叉类型的复杂结构中，通过检查对象的特定属性（如kind属性），可以有效区分不同子类型，使得代码在处理复杂类型关系时更有条理。

可能遇到的问题

类型保护可能遇到的问题

兼容性问题：typeof和instanceof在不同环境可能有兼容性差异。例如在一些旧版本JavaScript环境中，typeof对于某些复杂对象类型的判断可能不准确。
过度依赖类型断言：在自定义类型保护函数中，可能过度依赖类型断言（如(animal as Bird).fly!== undefined），这可能绕过编译器的严格检查，如果断言错误，可能导致运行时错误。

类型守卫可能遇到的问题

属性名冲突：在通过属性判断进行类型守卫时，如果不同子类型有相同属性名但含义不同，可能导致判断错误。例如如果Circle和Square都有一个名为size的属性，但含义不同，在类型守卫时就需要特别小心。
性能问题：在复杂项目中，频繁的运行时类型判断可能会带来一定的性能开销，特别是在循环或大量数据处理场景下。

星途面试题库