TypeScript中怎麼寫函數重載？以下這篇文章為大家介紹一下TypeScript中函數重載寫法，希望對大家有幫助！
大多數函數接受一組固定的參數。
但有些函數可以接受可變數量的參數，不同類型的參數，甚至可以根據你呼叫函數的方式傳回不同的型別。為了註解這樣的函數，TypeScript 提供了函數重載功能。
我們先來考慮一個函數，它傳回給一個特定的人的問候訊息。
function greet(person: string): string {
return `Hello, ${person}!`;
}上面的函數接受1個字元類型的參數：人的名字。呼叫該函數是非常簡單的:
greet('World'); // 'Hello, World!'
如果你想讓 greet()函數更加靈活，怎麼辦？例如，讓它另外接受一個要問候的人的清單。
這樣的函數將接受一個字串或字串陣列作為參數，並傳回一個字串或字串陣列。
如何對這樣的函數進行註解？有2種方法。
第一種方法很簡單，就是透過更新參數和傳回型別直接修改函數簽章。下面重構後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');
}現在我們可以用兩種方式呼叫greet():
greet('World'); // 'Hello, World!' greet(['小智', '大冶']); // ['Hello, 小智!', 'Hello, 大冶!']
直接更新函數簽章以支援多種呼叫方式是一種常見的好方法。
然而，在某些情況下，我們可能需要採用另一種方法，分別定義你的函數可以被呼叫的所有方式。這種方法稱為函數重載。
第二種方法是使用函數重載函數。當函數簽章相對複雜且涉及多種類型時，我推薦使用這種方法。
定義函數重載需要定義重載簽章和一個實作簽章。
重載簽章定義函數的形參和傳回類型，沒有函數體。一個函數可以有多個重載簽章:對應於呼叫該函數的不同方式。
另一方面，實作簽章也有參數型別和回傳類型，而且還有實作函數的主體，只能有一個實作簽章。
// 重载签名
function greet(person: string): string;
function greet(persons: string[]): string[];
// 实现签名
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() 函數有兩個重載簽章和一個實作簽章。
每個重載簽章都描述了可以呼叫函數的一種方式。就 greet()函數而言，我們可以用兩種方式呼叫它：用一個字串參數，或用一個字串陣列參數。
實作簽章 function greet(person: unknown): unknown { ... } 包含了該函式如何運作的適當邏輯。
現在，和上面一樣，可以用字串或字串陣列類型的參數來呼叫 greet()。
greet('World'); // 'Hello, World!' greet(['小智', '大冶']); // ['Hello, 小智!', 'Hello, 大冶!']
2.1 重載簽章是可呼叫的
雖然實作簽章實作了函式行為，但它不能直接呼叫。只有重載簽名是可呼叫的。
greet('World'); // 重载签名可调用
greet(['小智', '大冶']); // 重载签名可调用
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[]'.在上面的範例中，即使實作簽章接受unknown參數，也不能使用型別為unknown (greet(someValue)) 的參數呼叫# greet() 函數。
2.2 實作簽章必須是通用的
// 重载签名
function greet(person: string): string;
function greet(persons: string[]): string[];
// 此重载签名与其实现签名不兼容。
// 实现签名
function greet(person: unknown): string {
// ...
throw new Error('Unable to greet');
} 重載簽章函數greet(person: string[]): string[ ] 被標記為與greet(person: unknown): string不相容。
實作簽章的 string 傳回型別不夠通用，不能與重載簽章的 string[] 回傳類型相容。
雖然在前面的例子中，函數重載被應用於一個普通函數。但是我們也可以重載一個方法
在方法重載區間，重載簽章和實作簽章都是類別的一部分了。
例如，我們實作一個 Greeter類，有一個重載方法greet()。
class Greeter {
message: string;
constructor(message: string) {
this.message = message;
}
// 重载签名
greet(person: string): string;
greet(persons: string[]): string[];
// 实现签名
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個重載簽章描述如何呼叫該方法，以及包含正確實作的實作簽章
由於方法重載，我們可以用兩種方式呼叫hi.greet()：使用字串或使用字串陣列作為參數。
const hi = new Greeter('Hi'); hi.greet('小智'); // 'Hi, 小智!' hi.greet(['王大冶', '大冶']); // ['Hi, 王大冶!', 'Hi, 大冶!']
函數重載，如果使用得當，可以大幅增加可能以多種方式呼叫的函數的可用性。這在自動補全時特別有用:我們會在自動補全中列出所有可能的重載記錄。
然而，在某些情況下，建議不要使用函數重載，而應該使用函數簽名。
例如，不要對可選參數使用函數重載：
// 不推荐做法
function myFunc(): string;
function myFunc(param1: string): string;
function myFunc(param1: string, param2: string): string;
function myFunc(...args: string[]): string {
// implementation...
}在函數簽名中使用可選參數是足夠的:
// 推荐做法
function myFunc(param1?: string, param2: string): string {
// implementation...
}TypeScript中的函數重載讓我們定義以多種方式呼叫的函數。
使用函數重載需要定義重載簽章：一組帶有參數和傳回類型的函數，但沒有主體。這些簽名表明應該如何呼叫該函數。
此外，你必須寫出函數的正確實作（實作簽章）：參數和回傳類型，以及函數體。請注意，實作簽名是不可呼叫的。
除了常規的函數之外，類別中的方法也可以重載。
英文原文網址：https://dmitripavltin.com/typeript-function-overloading/
作者： dmitripavlutin
譯者：前端小智
更多程式相關知識，請造訪：程式設計入門！ ！
以上是TypeScript中怎麼寫函數重載？寫法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
