您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)如何解析TypeScript中函數(shù)重載寫法,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
前言:
大多數(shù)函數(shù)接受一組固定的參數(shù)。但有些函數(shù)可以接受可變數(shù)量的參數(shù),不同類型的參數(shù),甚至可以根據(jù)你調(diào)用函數(shù)的方式返回不同的類型。為了注釋這樣的函數(shù),TypeScript 提供了函數(shù)重載功能。
我們先來考慮一個函數(shù),它返回給一個特定的人的問候信息。
function greet(person: string): string { return `Hello, ${person}!`; }
上面的函數(shù)接受1個字符類型的參數(shù):人的名字。調(diào)用該函數(shù)是非常簡單的:
greet('World'); // 'Hello, World!'
如果你想讓 greet()
函數(shù)更加靈活,怎么辦?例如,讓它另外接受一個要問候的人的列表。
這樣的函數(shù)將接受一個字符串或字符串?dāng)?shù)組作為參數(shù),并返回一個字符串或字符串?dāng)?shù)組。
如何對這樣的函數(shù)進(jìn)行注釋?有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ù)重載。
第二種方法是使用函數(shù)重載功能。當(dāng)函數(shù)簽名相對復(fù)雜且涉及多種類型時,我推薦使用這種方法。
定義函數(shù)重載需要定義重載簽名和一個實現(xiàn)簽名。
重載簽名定義函數(shù)的形參和返回類型,沒有函數(shù)體。一個函數(shù)可以有多個重載簽名:對應(yīng)于調(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ù),或用一個字符串?dāng)?shù)組參數(shù)。
實現(xiàn)簽名 function greet(person: unknown): unknown { ... }
包含了該函數(shù)如何工作的適當(dāng)邏輯。
現(xiàn)在,和上面一樣,可以用字符串或字符串?dāng)?shù)組類型的參數(shù)來調(diào)用 greet()
。
greet('World'); // 'Hello, World!' greet(['小智', '大冶']); // ['Hello, 小智!', 'Hello, 大冶!']
雖然實現(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ù)。
// 重載簽名 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[]
被標(biāo)記為與greet(person: unknown): string
不兼容。
實現(xiàn)簽名的 string
返回類型不夠通用,不能與重載簽名的 string[]
返回類型兼容。
雖然在前面的例子中,函數(shù)重載被應(yīng)用于一個普通函數(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():使用一個字符串或使用一個字符串?dāng)?shù)組作為參數(shù)。
const hi = new Greeter('Hi'); hi.greet('小智'); // 'Hi, 小智!' hi.greet(['王大冶', '大冶']); // ['Hi, 王大冶!', 'Hi, 大冶!']
函數(shù)重載,如果使用得當(dāng),可以大大增加可能以多種方式調(diào)用的函數(shù)的可用性。這在自動補全時特別有用:我們會在自動補全中列出所有可能的重載記錄。
然而,在某些情況下,建議不要使用函數(shù)重載,而應(yīng)該使用函數(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... }
TypeScript
中的函數(shù)重載讓我們定義以多種方式調(diào)用的函數(shù)。
使用函數(shù)重載需要定義重載簽名:一組帶有參數(shù)和返回類型的函數(shù),但沒有主體。這些簽名表明應(yīng)該如何調(diào)用該函數(shù)。
看完上述內(nèi)容,你們對如何解析TypeScript中函數(shù)重載寫法有進(jìn)一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。