[[439759]]

大多數(shù)函數(shù)接受一組固定的參數(shù)。

但有些函數(shù)可以接受可變數(shù)量的參數(shù)，不同類型的參數(shù)，甚至可以根據(jù)你調(diào)用函數(shù)的方式返回不同的類型。為了注釋這樣的函數(shù)，TypeScript 提供了函數(shù)重載功能。

1. 函數(shù)簽名

我們先來考慮一個函數(shù)，它返回給一個特定的人的問候信息。

function greet(person: string): string { 
  return `Hello, ${person}!`; 
} 

上面的函數(shù)接受1個字符類型的參數(shù)：人的名字。調(diào)用該函數(shù)是非常簡單的:

greet('World'); // 'Hello, World!' 

如果你想讓 greet()函數(shù)更加靈活，怎么辦?例如，讓它另外接受一個要問候的人的列表。

這樣的函數(shù)將接受一個字符串或字符串數(shù)組作為參數(shù)，并返回一個字符串或字符串數(shù)組。

如何對這樣的函數(shù)進行注釋?有2種方法。

第一種方法很簡單，就是通過更新參數(shù)和返回類型直接修改函數(shù)簽名。下面重構(gòu)后greet()的樣子:

function greet(person: string | string[]): string | string[] { 
  if (typeof person === 'string') { 
    return `Hello, ${person}!`; 
  } else if (Array.isArray(person)) { 
    return person.map(name => `Hello, ${name}!`); 
  } 
  throw new Error('Unable to greet'); 
} 

現(xiàn)在我們可以用兩種方式調(diào)用 greet():

greet('World');          // 'Hello, World!' 
greet(['小智', '大冶']); // ['Hello, 小智!', 'Hello, 大冶!'] 

直接更新函數(shù)簽名以支持多種調(diào)用方式是一種常見的好方法。

然而，在某些情況下，我們可能需要采用另一種方法，分別定義你的函數(shù)可以被調(diào)用的所有方式。這種方法被稱為函數(shù)重載。

2.函數(shù)重載

第二種方法是使用函數(shù)重載功能。當函數(shù)簽名相對復雜且涉及多種類型時，我推薦使用這種方法。

定義函數(shù)重載需要定義重載簽名和一個實現(xiàn)簽名。

重載簽名定義函數(shù)的形參和返回類型，沒有函數(shù)體。一個函數(shù)可以有多個重載簽名:對應于調(diào)用該函數(shù)的不同方式。

另一方面，實現(xiàn)簽名還具有參數(shù)類型和返回類型，而且還有實現(xiàn)函數(shù)的主體，且只能有一個實現(xiàn)簽名。

// 重載簽名 
function greet(person: string): string; 
function greet(persons: string[]): string[]; 
  
// 實現(xiàn)簽名 
function greet(person: unknown): unknown { 
  if (typeof person === 'string') { 
    return `Hello, ${person}!`; 
  } else if (Array.isArray(person)) { 
    return person.map(name => `Hello, ${name}!`); 
  } 
  throw new Error('Unable to greet'); 
} 

greet() 函數(shù)有兩個重載簽名和一個實現(xiàn)簽名。

每個重載簽名都描述了可以調(diào)用該函數(shù)的一種方式。就 greet()函數(shù)而言，我們可以用兩種方式調(diào)用它：用一個字符串參數(shù)，或用一個字符串數(shù)組參數(shù)。

實現(xiàn)簽名 function greet(person: unknown): unknown { ... } 包含了該函數(shù)如何工作的適當邏輯。

現(xiàn)在，和上面一樣，可以用字符串或字符串數(shù)組類型的參數(shù)來調(diào)用 greet()。

greet('World');          // 'Hello, World!' 
greet(['小智', '大冶']); // ['Hello, 小智!', 'Hello, 大冶!'] 

2.1 重載簽名是可調(diào)用的

雖然實現(xiàn)簽名實現(xiàn)了函數(shù)行為，但是它不能直接調(diào)用。只有重載簽名是可調(diào)用的。

greet('World');          // 重載簽名可調(diào)用 
greet(['小智', '大冶']); // 重載簽名可調(diào)用 
 
const someValue: unknown = 'Unknown'; 
greet(someValue);       // Implementation signature NOT callable 
 
// 報錯 
No overload matches this call. 
  Overload 1 of 2, '(person: string): string', gave the following error. 
    Argument of type 'unknown' is not assignable to parameter of type 'string'. 
  Overload 2 of 2, '(persons: string[]): string[]', gave the following error. 
    Argument of type 'unknown' is not assignable to parameter of type 'string[]'. 

在上面的示例中，即使實現(xiàn)簽名接受unknown參數(shù)，也不能使用類型為 unknown (greet(someValue)) 的參數(shù)調(diào)用 greet() 函數(shù)。

2.1 實現(xiàn)簽名必須是通用的

// 重載簽名 
function greet(person: string): string; 
function greet(persons: string[]): string[];  
// 此重載簽名與其實現(xiàn)簽名不兼容。 
 
  
// 實現(xiàn)簽名 
function greet(person: unknown): string { 
  // ... 
  throw new Error('Unable to greet'); 
} 

重載簽名函數(shù) greet(person: string[]): string[] 被標記為與greet(person: unknown): string不兼容。

實現(xiàn)簽名的 string 返回類型不夠通用，不能與重載簽名的 string[] 返回類型兼容。

3.方法重載

雖然在前面的例子中，函數(shù)重載被應用于一個普通函數(shù)。但是我們也可以重載一個方法

在方法重載區(qū)間，重載簽名和實現(xiàn)簽名都是類的一部分了。

例如，我們實現(xiàn)一個 Greeter類，有一個重載方法greet()。

class Greeter { 
  message: string; 
  
  constructor(message: string) { 
    this.message = message; 
  } 
  
  // 重載簽名 
  greet(person: string): string; 
  greet(persons: string[]): string[]; 
  
  // 實現(xiàn)簽名 
  greet(person: unknown): unknown { 
    if (typeof person === 'string') { 
      return `${this.message}, ${person}!`; 
    } else if (Array.isArray(person)) { 
      return person.map(name => `${this.message}, ${name}!`); 
    } 
    throw new Error('Unable to greet'); 
  } 

Greeter 類包含 greet() 重載方法:2個重載簽名描述如何調(diào)用該方法，以及包含正確實現(xiàn)的實現(xiàn)簽名

由于方法重載，我們可以用兩種方式調(diào)用 hi.greet()：使用一個字符串或使用一個字符串數(shù)組作為參數(shù)。

const hi = new Greeter('Hi'); 
  
hi.greet('小智');       // 'Hi, 小智!' 
hi.greet(['王大冶', '大冶']); // ['Hi, 王大冶!', 'Hi, 大冶!'] 

4. 何時使用函數(shù)重載

函數(shù)重載，如果使用得當，可以大大增加可能以多種方式調(diào)用的函數(shù)的可用性。這在自動補全時特別有用:我們會在自動補全中列出所有可能的重載記錄。

然而，在某些情況下，建議不要使用函數(shù)重載，而應該使用函數(shù)簽名。

例如，不要對可選參數(shù)使用函數(shù)重載：

// 不推薦做法 
function myFunc(): string; 
function myFunc(param1: string): string; 
function myFunc(param1: string, param2: string): string; 
function myFunc(...args: string[]): string { 
  // implementation... 
} 

在函數(shù)簽名中使用可選參數(shù)是足夠的:

// 推薦做法 
function myFunc(param1?: string, param2: string): string { 
  // implementation... 
} 

5.總結(jié)

TypeScript中的函數(shù)重載讓我們定義以多種方式調(diào)用的函數(shù)。

使用函數(shù)重載需要定義重載簽名：一組帶有參數(shù)和返回類型的函數(shù)，但沒有主體。這些簽名表明應該如何調(diào)用該函數(shù)。

此外，你必須寫出函數(shù)的正確實現(xiàn)(實現(xiàn)簽名)：參數(shù)和返回類型，以及函數(shù)體**。請注意，實現(xiàn)簽名是不可調(diào)用的。**

除了常規(guī)的函數(shù)之外，類中的方法也可以重載。

作者：dmitripavlutin 譯者：前端小智

來源：dmitripavlutin 原文：https://dmitripavltin.com/typeript-function-overloading/

【編輯推薦】