深入了解TypeScript函數重載

在TypeScript中，函數重載是一種強大的編程技巧，允許開發人員定義多個具有相同名稱但不同參數數量或類型的函數。這意味著開發人員可以使用單一名稱來表示多個操作，以及使用類型檢查來確定代碼的正確性。

一、基礎函數重載

基本的函數重載是定義一系列具有相同名稱的函數，但每個函數的參數可能有所不同。在TypeScript中，可以通過在函數聲明之前添加多個函數定義來實現這一點。以下是基礎函數重載的示例代碼：

function convertToString(value: number): string;
function convertToString(value: boolean): string;
function convertToString(value: any): string {
  return String(value);
}

在上面的示例中，我們定義了名為「convertToString」的函數，並為不同的參數類型定義了兩個不同的函數。最終，唯一的實現函數將根據調用該函數時提供的參數類型進行選擇，以便返回正確的函數。

通過這種方式，我們可以為不同類型的參數定義不同的邏輯，而不必創建多個具有不同名稱的函數。

二、可選和默認參數函數重載

除了支持不同參數類型外，TypeScript還支持可選和默認參數函數重載。以下是一個使用可選參數的示例：

function formatString(format: string, ...params: number[]): string;
function formatString(format: string, ...params: any[]): string {
  return format.replace(/\{\{|\}\}|\{(\d+)\}/g, function(
    m: string,
    n?: number
  ): string {
    if (m === "{{") return "{"
    if (m === "}}") return "}"
    return params[n!] + "";
  });
}

在上面的示例中，我們定義了具有一個必需參數和一個可選參數的函數。必需參數是一個格式化字元串，而可選參數是一個參數數組。該函數將使用正則表達式將格式化字元串中的佔位符替換為傳遞的參數。

另一種常見的函數重載類型是默認參數。以下是一個使用默認參數的示例：

function generateId(): number;
function generateId(prefix: string): string;
function generateId(prefix?: string): number | string {
  const random = Math.floor(Math.random() * 1000000);
  return prefix ? `${prefix}-${random}` : random;
}

在上面的示例中，我們定義了具有一個可選字元串參數的函數。如果參數存在，則返回一個字元串。否則，我們返回一個隨機數字。

三、字元串聯合類型函數重載

在TypeScript中，我們還可以使用字元串聯合類型作為函數重載的一部分。以下是使用字元串聯合類型的示例：

type CacheKeyType = "string" | "number";

function getFromCache(key: string): string;
function getFromCache(key: number): string;
function getFromCache(key: CacheKeyType): string | undefined {
  const item = localStorage.getItem(String(key));
  return item ? String(item) : undefined;
}

在上面的示例中，我們定義了具有字元串和數字參數的函數，並通過字元串聯合類型定義了一個新類型。最後，我們定義了一個實現函數，它將根據傳入的參數類型選擇正確的代碼分支。

四、使用this參數的函數重載

在TypeScript中，函數重載還支持this參數。以下是使用this參數的示例：

interface Promise {
  success(callback: (result: T) => any): Promise;
}

Promise.prototype.success = function(callback) {
  this.then(result => {
    callback(result);
  });
};

在上面的示例中，我們定義了一個返回Promise對象的函數，並將this參數用作對象的上下文。我們還實現了一個名為「success」的函數，並將其綁定到Promise原型上。最後，我們使用this參數來處理Promise對象的結果。

五、使用泛型的函數重載

最後，我們還可以使用泛型函數重載來實現更靈活的類型檢查。以下是一個具有泛型類型的示例：

function identity(value: T): T;
function identity(value: T[]): T[];
function identity(value: T | T[]): T | T[] {
  return value;
}

在上面的示例中，我們有兩個函數重載，一個用於處理單個值，另一個用於處理值的數組。我們使用泛型類型進行類型參數化，並根據參數的類型選擇正確的函數。

結論

在TypeScript中，函數重載是將代碼模塊化並確保類型安全的一種強大方式。通過定義多個具有相同名稱但不同參數和返回類型的函數，我們可以優雅地實現不同業務邏輯的封裝，而無需創建一堆不同名稱的函數。

如果您還沒有使用TypeScript函數重載，現在就開始使用吧！