面试题：TypeScript 类型保护与类型断言的区别及应用场景

Question

请详细阐述 TypeScript 中类型保护和类型断言的概念，举例说明它们的区别，并分别列举至少两个适用的应用场景。

Answer 1

类型保护

1. 概念：类型保护是一种运行时检查机制，它允许开发者在代码运行时检查某个变量是否属于特定类型。通过类型保护，可以在条件分支中缩小变量的类型范围，使得 TypeScript 编译器能够根据实际情况进行更精确的类型检查。
2. 示例：

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

在上述代码中，typeof value ==='string' 就是一个类型保护，它缩小了 value 在 if 分支中的类型范围。

3. 应用场景：
   • 函数参数类型不确定：当函数接收多种类型的参数，需要根据不同类型执行不同逻辑时。例如：

function handleValue(value: string | number) {
    if (typeof value === 'number') {
        return value * 2;
    } else {
        return value.toUpperCase();
    }
}

- **联合类型数组遍历**：在遍历包含多种类型的数组时，可通过类型保护处理不同类型元素。

let mixedArray: (string | number)[] = [1, 'two', 3];
mixedArray.forEach((item) => {
    if (typeof item === 'number') {
        console.log(item + 1);
    } else {
        console.log(item.length);
    }
});

类型断言

1. 概念：类型断言是一种开发者手动告诉编译器某个变量的类型的方式。它只是在编译阶段起作用，并不会在运行时进行实际的类型检查。通过类型断言，可以绕过 TypeScript 编译器的部分类型检查，让开发者按照自己指定的类型来处理变量。
2. 示例：

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

这里通过 as string 将 someValue 断言为 string 类型，从而可以访问 length 属性。

3. 应用场景：
   • 使用第三方库：当使用一些类型定义不完善的第三方库时，可通过类型断言明确变量类型。例如：

// 假设 jQuery 类型定义不完整
let $ = require('jquery');
let myElement = $('#myElement') as HTMLElement;

- **绕过类型检查**：在已知某个变量的实际类型，但编译器无法推断时，可使用类型断言。

function getValue() {
    return "a string";
}
let result = getValue();
let length = (result as string).length; 

区别

1. 运行时检查：类型保护在运行时进行检查，根据实际情况缩小类型范围；而类型断言仅在编译时起作用，不进行运行时检查。
2. 安全性：类型保护相对更安全，因为它基于运行时实际情况；类型断言如果使用不当，可能导致运行时错误，因为开发者手动指定的类型可能与实际类型不符。