面试题：TypeScript 类型守卫的应用及原理

Question

在 TypeScript 中，类型守卫是确保类型安全的重要机制。请详细描述类型守卫的概念，说明如何自定义类型守卫函数，以及在复杂类型判断场景下，如何利用类型守卫解决类型缩小的问题，并给出一个包含至少两种类型守卫方式的代码示例及解释。

Answer 1

类型守卫概念

类型守卫是一种运行时检查的方式，它允许在 TypeScript 代码中缩小变量的类型范围。通过类型守卫，可以在特定代码块内，让 TypeScript 编译器知道某个变量的实际类型，从而避免类型错误。

自定义类型守卫函数

自定义类型守卫函数需要满足特定的返回值类型：parameterName is Type，其中 parameterName 是函数参数名，Type 是要判断的类型。

例如：

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

在复杂类型判断场景下利用类型守卫解决类型缩小问题

在处理联合类型等复杂类型时，类型守卫能有效缩小变量类型范围。比如对于联合类型 string | number，可以通过类型守卫判断实际类型。

代码示例及解释

// 类型守卫函数 1：判断是否为字符串
function isString(value: any): value is string {
    return typeof value ==='string';
}

// 类型守卫函数 2：判断是否为数字
function isNumber(value: any): value is number {
    return typeof value === 'number';
}

// 处理联合类型的函数
function printValue(value: string | number) {
    if (isString(value)) {
        // 在这个代码块内，TypeScript 知道 value 是 string 类型
        console.log(value.length); 
    } else if (isNumber(value)) {
        // 在这个代码块内，TypeScript 知道 value 是 number 类型
        console.log(value.toFixed(2)); 
    }
}

// 调用示例
printValue('hello'); 
printValue(42); 

在上述代码中，定义了两个类型守卫函数 isString 和 isNumber。printValue 函数接受 string | number 联合类型参数，通过这两个类型守卫函数，在不同分支内实现了类型缩小，从而可以安全地调用对应类型的方法。