Typescript重载箭头函数不起作用

TypeScript 中的函数重载允许你定义多个函数签名，以便同一个函数名可以根据不同的参数类型和数量执行不同的逻辑。然而，箭头函数（Arrow Functions）在 TypeScript 中并不直接支持函数重载，因为箭头函数没有自己的 this 上下文，也没有函数声明的形式，它们只是表达式。

基础概念

函数重载：在 TypeScript 中，你可以为一个函数定义多个类型签名，这些签名描述了函数可以接受的不同参数类型和返回值类型。

箭头函数：箭头函数提供了一种更简洁的函数书写方式，并且它会捕获其所在上下文的 this 值。

为什么箭头函数重载不起作用

箭头函数没有自己的 this 上下文，也没有函数声明的形式，它们只是表达式。因此，TypeScript 编译器无法为箭头函数提供多个类型签名。

解决方法

要实现类似重载的功能，你可以使用以下几种方法：

使用普通函数声明：普通函数声明支持重载。

function myFunc(param: string): string;
function myFunc(param: number): number;
function myFunc(param: string | number): string | number {
    if (typeof param === 'string') {
        return `Hello, ${param}`;
    } else {
        return param * 2;
    }
}

使用类型断言或类型保护：在箭头函数内部使用类型断言或类型保护来区分不同的参数类型。

const myFunc = (param: string | number): string | number => {
    if (typeof param === 'string') {
        return `Hello, ${param}`; // 这里 TypeScript 知道 param 是 string 类型
    } else {
        return param * 2; // 这里 TypeScript 知道 param 是 number 类型
    }
};

使用函数工厂：创建一个函数，返回一个箭头函数，这个返回的箭头函数可以根据不同的参数执行不同的逻辑。

const createMyFunc = () => {
    return (param: string | number): string | number => {
        if (typeof param === 'string') {
            return `Hello, ${param}`;
        } else {
            return param * 2;
        }
    };
};

const myFunc = createMyFunc();

应用场景

函数重载在需要根据不同的参数类型执行不同逻辑的场景中非常有用，例如：

处理不同类型的输入数据。
提供灵活的 API 接口。
在库或框架中提供通用的功能。

示例代码

以下是一个使用普通函数声明实现重载的示例：

function greet(name: string): string;
function greet(names: string[]): string[];
function greet(nameOrNames: string | string[]): string | string[] {
    if (Array.isArray(nameOrNames)) {
        return nameOrNames.map(name => `Hello, ${name}`);
    } else {
        return `Hello, ${nameOrNames}`;
    }
}

console.log(greet('Alice')); // 输出: Hello, Alice
console.log(greet(['Alice', 'Bob'])); // 输出: [ 'Hello, Alice', 'Hello, Bob' ]

在这个例子中，greet 函数可以根据传入的单个字符串或字符串数组返回相应的问候语。

总之，虽然箭头函数不支持直接的重载，但你可以通过其他方式实现类似的功能。