面试题：TypeScript 混合类型中的类型守卫与类型断言

Question

在处理混合类型时，如何利用类型守卫和类型断言确保类型安全？请以一个包含多种混合类型元素的数组为例，编写代码实现筛选出特定类型的元素，并解释类型守卫和类型断言在其中的作用。

Answer 1

假设我们有一个包含多种混合类型元素的数组，例如：let mixedArray: (string | number)[] = ['1', 2, '3', 4];

使用类型守卫筛选特定类型元素

function filterStrings(arr: (string | number)[]): string[] {
    return arr.filter((element): element is string => typeof element ==='string');
}

let mixedArray: (string | number)[] = ['1', 2, '3', 4];
let stringArray = filterStrings(mixedArray);
console.log(stringArray); 

类型守卫的作用

在上述代码中，filter 方法的回调函数 (element): element is string => typeof element ==='string' 就是一个类型守卫。它的作用是在运行时检查数组中的每个元素，判断其是否为 string 类型。如果是 string 类型，类型守卫返回 true，该元素就会被保留在 filter 方法返回的新数组中。这样，通过类型守卫，TypeScript 能够在运行时确定元素的实际类型，从而确保类型安全。

使用类型断言筛选特定类型元素

let mixedArray: (string | number)[] = ['1', 2, '3', 4];
let stringArray: string[] = [];
for (let i = 0; i < mixedArray.length; i++) {
    if (typeof mixedArray[i] ==='string') {
        stringArray.push(mixedArray[i] as string);
    }
}
console.log(stringArray); 

类型断言的作用

在这段代码中，mixedArray[i] as string 就是类型断言。当我们已经通过 typeof mixedArray[i] ==='string' 检查确定元素是 string 类型后，使用类型断言告诉 TypeScript 编译器，我们明确知道这个元素是 string 类型，编译器可以按照 string 类型来处理它，从而允许我们将其添加到 stringArray 中。类型断言主要是给编译器一个类型提示，在编译阶段帮助确保类型安全，而不像类型守卫那样在运行时进行检查。