面试题：TypeScript类型拓宽原理在联合类型中的体现

Question

假设有一个函数`combine`，它接收两个参数，参数类型为联合类型`string | number`。函数的功能是将两个参数进行组合并返回。如果两个参数都是数字，则返回它们的和；如果至少有一个参数是字符串，则将它们拼接成字符串返回。请实现这个函数，并详细解释在这个过程中TypeScript的类型拓宽原理是如何起作用的。

Answer 1

function combine(a: string | number, b: string | number): string | number {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    } else {
        return '' + a + b;
    }
}

类型拓宽原理解释

1. 参数类型：参数a和b的类型被定义为联合类型string | number。这意味着它们可以是字符串或者数字。这是TypeScript的类型拓宽的一种体现，将可能的类型进行合并。
2. 条件判断中的类型细化：在if语句中，通过typeof检查，当判断typeof a === 'number' && typeof b === 'number'时，TypeScript能够在这个分支内部将a和b的类型细化为number。这是因为条件判断对类型进行了缩小范围的操作，从联合类型string | number细化为number。
3. 返回值类型：整个函数的返回值类型也是联合类型string | number。这是因为根据不同的输入情况，返回值可能是数字（两个参数都是数字时），也可能是字符串（至少有一个参数是字符串时）。TypeScript在处理这种情况时，会根据函数内部的逻辑，结合类型拓宽和细化的规则，确保返回值类型的正确性。当返回a + b（在两个参数都是数字的分支）时，返回类型是number；当返回'' + a + b（至少有一个参数是字符串的分支）时，返回类型是string，最终函数返回值类型是string | number，这就是类型拓宽在返回值类型确定中的应用。