面试题：TypeScript 函数重载中类型推断基础应用

Question

请编写一个 TypeScript 函数 `add`，它有两个重载，一个接受两个数字参数并返回它们的和，另一个接受两个字符串参数并返回它们拼接后的结果。然后说明在这两个重载中，TypeScript 的类型推断是如何工作的，以及它对函数调用的影响。

Answer 1

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: number | string, b: number | string): number | string {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    } else if (typeof a ==='string' && typeof b ==='string') {
        return a + b;
    }
    throw new Error('Invalid arguments');
}

// 类型推断在这两个重载中的工作原理及对函数调用的影响：
// - **类型推断工作原理**：
//   - 当编写函数重载时，TypeScript 通过函数的参数类型来推断应该使用哪个重载。例如，当调用 `add(1, 2)` 时，由于参数都是 `number` 类型，TypeScript 会推断出调用的是接受两个 `number` 参数并返回 `number` 的重载。同样，当调用 `add('a', 'b')` 时，因为参数是 `string` 类型，所以会推断出使用接受两个 `string` 参数并返回 `string` 的重载。
//   - 在实现函数体时，TypeScript 会根据前面定义的重载签名，确保函数体中的逻辑与参数类型匹配。例如，在上述实现中，通过 `typeof` 检查来确保对不同类型参数执行正确的操作（数字相加或字符串拼接）。
// - **对函数调用的影响**：
//   - 类型推断使得函数调用更加安全和明确。在调用 `add` 函数时，开发人员不需要显式地指定返回值类型，TypeScript 可以根据参数类型自动推断出返回值类型。例如，`const result1 = add(1, 2);`，TypeScript 知道 `result1` 的类型是 `number`；`const result2 = add('a', 'b');`，TypeScript 知道 `result2` 的类型是 `string`。这样在后续使用 `result1` 和 `result2` 时，TypeScript 可以进行类型检查，防止出现类型错误，比如将 `result1` 当作 `string` 类型来使用等情况。