偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

TypeScript中函數重載寫法,你在第幾層!

開發(fā) 前端
TypeScript中的函數重載讓我們定義以多種方式調用的函數。使用函數重載需要定義重載簽名:一組帶有參數和返回類型的函數,但沒有主體。這些簽名表明應該如何調用該函數。

[[439759]]

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

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

1. 函數簽名

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

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

上面的函數接受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'); 

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

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

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

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

2.函數重載

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

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

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

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

  1. // 重載簽名 
  2. function greet(person: string): string; 
  3. function greet(persons: string[]): string[]; 
  4.   
  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'); 

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

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

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

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

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

2.1 重載簽名是可調用的

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

  1. greet('World');          // 重載簽名可調用 
  2. greet(['小智''大冶']); // 重載簽名可調用 
  3.  
  4. const someValue: unknown = 'Unknown'
  5. greet(someValue);       // Implementation signature NOT callable 
  6.  
  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. // 此重載簽名與其實現簽名不兼容。 
  5.  
  6.   
  7. // 實現簽名 
  8. function greet(person: unknown): string { 
  9.   // ... 
  10.   throw new Error('Unable to greet'); 

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

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

3.方法重載

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

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

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

  1. class Greeter { 
  2.   message: string; 
  3.   
  4.   constructor(message: string) { 
  5.     this.message = message; 
  6.   } 
  7.   
  8.   // 重載簽名 
  9.   greet(person: string): string; 
  10.   greet(persons: string[]): string[]; 
  11.   
  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'); 
  2.   
  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... 

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

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

5.總結

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

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

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

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

作者:dmitripavlutin 譯者:前端小智

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

【編輯推薦】

 

責任編輯:姜華 來源: 大遷世界
相關推薦

2021-05-11 09:37:00

JsBind代碼

2023-04-14 15:44:20

TypeScrip函數重載

2022-01-04 19:21:04

函數TypeScript重載

2022-08-29 08:48:59

Go函數工廠模式

2025-06-27 06:42:01

2022-02-28 08:17:24

重載函數JS前端

2009-05-25 15:00:20

2021-09-07 08:33:27

JavaScript TypeScript 函數

2016-10-11 13:32:50

函數式TypeScriptJavascript

2011-07-20 17:16:50

C++重載函數

2010-01-18 16:56:30

C++函數

2009-07-31 16:00:30

C#函數重載

2024-01-30 08:30:41

TypeScript編譯器類型

2012-05-04 14:09:30

JavaScript

2016-09-30 09:43:17

JavascriptTypeScript函數式編程

2022-04-26 09:01:45

運算符TypeScript代碼

2022-04-28 21:53:52

TypeScriptany類型

2022-05-06 09:21:21

TypeScriptinterfacetype

2021-03-20 22:00:00

FreeDOS開源

2010-01-20 17:48:07

C++ 函數重載
點贊
收藏

51CTO技術棧公眾號