面试题：TypeScript 中 typeof 和 instanceof 类型保护在泛型与元组结合场景下的运用

Question

定义一个泛型函数，该函数接受一个元组作为参数，元组中可能包含不同类型的数据。使用 typeof 和 instanceof 类型保护来处理元组中的每个元素：如果元素是字符串，将其转换为大写；如果是数字，计算其立方；如果是自定义类的实例（假设已定义一个名为 CustomClass 且有特定方法 printInfo 的类），调用其 printInfo 方法。要求详细阐述在泛型与元组结合的场景下，如何有效运用 typeof 和 instanceof 实现精准的类型保护及操作。

Answer 1

class CustomClass {
    printInfo() {
        console.log('This is an instance of CustomClass');
    }
}

function processTuple<T extends unknown[]>(tuple: T): void {
    tuple.forEach((element) => {
        if (typeof element ==='string') {
            console.log(element.toUpperCase());
        } else if (typeof element === 'number') {
            console.log(element * element * element);
        } else if (element instanceof CustomClass) {
            element.printInfo();
        }
    });
}

// 示例使用
const myTuple: (string | number | CustomClass)[] = ['hello', 5, new CustomClass()];
processTuple(myTuple);

在泛型与元组结合的场景下：

1. 定义泛型函数：function processTuple<T extends unknown[]>(tuple: T)，这里 T 是一个泛型，它被约束为 unknown[]，即一个未知类型的数组（元组本质也是数组）。这样可以接受任意类型组成的元组。
2. 类型保护：
   • 使用 typeof：在 if (typeof element ==='string') 和 if (typeof element === 'number') 中，typeof 操作符在运行时检查变量的类型。TypeScript 基于此进行类型缩小，使得在对应的代码块内，element 的类型被精准地确定为 string 或 number，从而可以安全地调用 toUpperCase 或进行立方计算。
   • 使用 instanceof：if (element instanceof CustomClass) 检查 element 是否是 CustomClass 的实例。同样，在这个代码块内，element 的类型被缩小为 CustomClass，因此可以安全地调用 printInfo 方法。

通过这种方式，结合泛型、typeof 和 instanceof，可以有效实现对元组中不同类型元素的精准类型保护及相应操作。