探索 TypeScript 中函数重载的两种实现方法

函数重载是 TypeScript 中的一种强大特性，它允许我们基于不同的参数类型或数量来定义同名函数，提供了更灵活的函数处理方式。本文将简要介绍函数重载的意义和作用，并分享两种主要的实现方法：多个函数定义和接口定义。

函数重载的意义和作用#

函数重载为开发者提供了根据不同参数类型或数量执行不同函数逻辑的便捷方式，有助于提高代码的可读性和可维护性。通过函数重载，我们可以使用同一个函数名来表示一组相关联的函数，使得函数的调用和使用变得更为灵活。

使用多个函数定义#

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
  if (typeof x === "number") {
    return Number(x.toString().split("").reverse().join(""));
  } else if (typeof x === "string") {
    return x.split("").reverse().join("");
  } else {
    throw new Error("Unsupported type");
  }
}

// 使用
const reversedNumber = reverse(123); // 返回 321
const reversedString = reverse("hello"); // 返回 "olleh"

在上面的例子中，reverse 函数根据参数的类型执行不同的逻辑，为数字类型参数执行数字反转，为字符串类型参数执行字符串反转。

使用接口定义#

interface Employee {
  (name: string, id: number): void;
  (id: number): string;
}

const identifyEmployee: Employee = function (nameOrId: string | number, id?: number): void | string {
  if (typeof nameOrId === "string" && id) {
    // 根据名称和ID识别雇员
    console.log(`Employee ${nameOrId} has id ${id}`);
  } else if (typeof nameOrId === "number") {
    // 根据ID获取员工名称
    return "John Doe"; // 返回示例员工名
  } else {
    throw new Error("Invalid arguments");
  }
}

// 使用
identifyEmployee("Alice", 123); // 打印 Employee Alice has id 123
const employeeName = identifyEmployee(123); // 返回 "John Doe"

在上述示例中，Employee 接口定义了两个重载签名，根据参数的不同执行不同的雇员识别逻辑。

结语#

函数重载使得 TypeScript 编程更为灵活和优雅。选择适当的函数重载方式取决于具体需求，无论是通过多个函数定义还是接口定义，都可以提高代码的可读性和可维护性，使得代码更加清晰易懂。