面试题：TypeScript如何实现对函数重载的支持及应用场景

Question

详细说明在TypeScript中函数重载的定义方式、语法规则。并结合实际项目，举例说明函数重载在处理不同参数类型或数量时，相较于普通函数的优势及适用场景。

Answer 1

函数重载的定义方式与语法规则

1. 定义方式：在TypeScript中，函数重载允许为同一个函数提供多个函数类型定义，每个定义有不同的参数列表。通过这种方式，函数可以根据传入参数的类型或数量来执行不同的逻辑。
2. 语法规则：
   • 首先需要定义多个函数签名（函数声明，不包含函数体），这些签名具有相同的函数名但参数列表不同。
   • 最后提供一个函数实现，该实现的参数列表需要兼容前面所有的函数签名。 例如：

// 函数重载声明
function add(a: number, b: number): number;
function add(a: string, b: string): string;

// 函数实现
function add(a: any, b: any): any {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    } else if (typeof a ==='string' && typeof b ==='string') {
        return a + b;
    }
    return null;
}

相较于普通函数的优势

1. 类型安全：普通函数如果接收多种类型的参数，可能需要在函数内部进行类型判断，这容易出错且缺乏类型提示。而函数重载在编译阶段就能根据传入参数类型检查调用的正确性，提供更好的类型安全保障。例如在上述add函数中，若调用add(1, '2')，在函数重载的情况下，TypeScript编译器会报错，而普通函数若不做严格的类型判断，可能在运行时才出现错误。
2. 代码可读性：函数重载使代码更清晰，不同参数类型或数量的逻辑处理通过不同的函数签名展示出来，开发者可以直观地了解函数支持的调用方式。相比之下，普通函数在处理多种参数情况时，可能需要复杂的注释来解释不同参数组合下的行为。

适用场景

1. 处理不同数据类型的输入：在一个绘图库中，可能有一个draw函数，它既可以接收number类型的坐标参数绘制图形，也可以接收string类型的CSS样式字符串来设置图形样式。

function draw(x: number, y: number): void;
function draw(style: string): void;
function draw(arg: any): void {
    if (typeof arg === 'number') {
        // 处理坐标绘制逻辑
    } else if (typeof arg ==='string') {
        // 处理样式设置逻辑
    }
}

2. 处理不同数量的参数：在一个数学计算库中，sum函数可能既支持两个数相加，也支持多个数相加。

function sum(a: number, b: number): number;
function sum(...nums: number[]): number;
function sum(arg1: any, arg2?: any): any {
    if (typeof arg2 === 'number') {
        return arg1 + arg2;
    } else {
        return (arg1 as number[]).reduce((acc, num) => acc + num, 0);
    }
}

通过函数重载，可以使函数在不同的输入情况下都能有清晰的逻辑和类型安全保障，提高代码的可维护性和健壮性。