大多數函數接受一組固定的參數。

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

1. 函數簽名

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

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

上面的函數接受1個字符類型的參數：人的名字。調用該函數是非常簡單的:

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

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

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

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

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

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

現在我們可以用兩種方式調用 greet():

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

直接更新函數簽名以支持多種調用方式是一種常見的好方法。

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

2.函數重載

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

定義函數重載需要定義重載簽名和一個實現簽名。

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

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

1. // 重載簽名
2. function greet(person: string): string;
3. function greet(persons: string[]): string[];
5. // 實現簽名
6. function greet(person: unknown): unknown {
7. if (typeof person === 'string') {
8. return `Hello, ${person}!`;
9. } else if (Array.isArray(person)) {
10. return person.map(name => `Hello, ${name}!`);
11. }
12. throw new Error('Unable to greet');
13. }

greet() 函數有兩個重載簽名和一個實現簽名。

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

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

現在，和上面一樣，可以用字符串或字符串數組類型的參數來調用 greet()。

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

2.1 重載簽名是可調用的

雖然實現簽名實現了函數行為，但是它不能直接調用。只有重載簽名是可調用的。

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

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

2.1 實現簽名必須是通用的

1. // 重載簽名
2. function greet(person: string): string;
3. function greet(persons: string[]): string[];
4. // 此重載簽名與其實現簽名不兼容。
7. // 實現簽名
8. function greet(person: unknown): string {
9. // ...
10. throw new Error('Unable to greet');
11. }

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

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

3.方法重載

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

在方法重載區間，重載簽名和實現簽名都是類的一部分了。

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

1. class Greeter {
2. message: string;
4. constructor(message: string) {
5. this.message = message;
6. }
8. // 重載簽名
9. greet(person: string): string;
10. greet(persons: string[]): string[];
12. // 實現簽名
13. greet(person: unknown): unknown {
14. if (typeof person === 'string') {
15. return `${this.message}, ${person}!`;
16. } else if (Array.isArray(person)) {
17. return person.map(name => `${this.message}, ${name}!`);
18. }
19. throw new Error('Unable to greet');
20. }

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

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

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

4. 何時使用函數重載

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

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

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

1. // 不推薦做法
2. function myFunc(): string;
3. function myFunc(param1: string): string;
4. function myFunc(param1: string, param2: string): string;
5. function myFunc(...args: string[]): string {
6. // implementation...
7. }

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

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

5.總結

TypeScript中的函數重載讓我們定義以多種方式調用的函數。

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

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

除了常規的函數之外，類中的方法也可以重載。

作者：dmitripavlutin 譯者：前端小智

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

原文鏈接：https://mp.weixin.qq.com/s/uwD01tyDK0WGHUs9bCYZdg