探索 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 編程更為靈活和優雅。選擇適當的函數重載方式取決於具體需求，無論是通過多個函數定義還是介面定義，都可以提高代碼的可讀性和可維護性，使得代碼更加清晰易懂。