面试题：TypeScript变量类型的复杂组合与类型守卫

Question

假设你有一个数组，数组元素可能是数字或者字符串，编写一个函数，该函数接收这个数组，返回数组中所有数字的总和。要求使用类型守卫和类型别名来清晰定义相关类型，并解释在这种复杂类型组合场景下，类型注解和类型推断的交互关系。

Answer 1

// 定义类型别名
type ArrayElement = number | string;
type ArrayType = ArrayElement[];

function sumOfNumbers(arr: ArrayType): number {
    let sum = 0;
    for (let element of arr) {
        // 使用类型守卫
        if (typeof element === 'number') {
            sum += element;
        }
    }
    return sum;
}

类型注解和类型推断的交互关系

1. 类型注解：在函数定义时，明确指定了参数 arr 的类型为 ArrayType，返回值类型为 number。这使得代码阅读者和 TypeScript 编译器都能清晰知道函数的输入输出类型要求，增加了代码的可读性和可维护性。
2. 类型推断：在 for...of 循环中，element 的类型并没有显式注解，TypeScript 会根据 ArrayType 推断出 element 可能是 number 或 string。在类型守卫 typeof element === 'number' 之后，TypeScript 能够细化 element 的类型为 number，从而可以安全地进行加法运算。
3. 交互作用：类型注解为代码提供了明确的类型定义框架，而类型推断则在这个框架内根据上下文自动推导具体变量的类型，两者相互配合，既保证了代码的正确性，又减少了不必要的冗余注解，提高了开发效率。