TypeScript中如何寫函數(shù)重載

本篇內(nèi)容介紹了“TypeScript中如何寫函數(shù)重載”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),皇姑網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:皇姑等地區(qū)?；使米鼍W(wǎng)站價(jià)格咨詢:13518219792

TypeScript中如何寫函數(shù)重載

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

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

1. 函數(shù)簽名

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

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

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

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

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

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

如何對(duì)這樣的函數(shù)進(jìn)行注釋？有2種方法。

第一種方法很簡(jiǎn)單，就是通過(guò)更新參數(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)用方式是一種常見(jiàn)的好方法。

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

2.函數(shù)重載

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

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

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

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

// 重載簽名
function greet(person: string): string;
function greet(persons: string[]): string[];
 
// 實(shí)現(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ù)有兩個(gè)重載簽名和一個(gè)實(shí)現(xiàn)簽名。

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

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

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

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

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

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

greet('World');          // 重載簽名可調(diào)用
greet(['小智', '大冶']); // 重載簽名可調(diào)用

const someValue: unknown = 'Unknown';
greet(someValue);       // Implementation signature NOT callable

// 報(bào)錯(cuò)
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[]'.

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

2.2 實(shí)現(xiàn)簽名必須是通用的

// 重載簽名
function greet(person: string): string;
function greet(persons: string[]): string[]; 
// 此重載簽名與其實(shí)現(xiàn)簽名不兼容。

 
// 實(shí)現(xiàn)簽名
function greet(person: unknown): string {
  // ...
  throw new Error('Unable to greet');
}

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

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

3.方法重載

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

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

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

class Greeter {
  message: string;
 
  constructor(message: string) {
    this.message = message;
  }
 
  // 重載簽名
  greet(person: string): string;
  greet(persons: string[]): string[];
 
  // 實(shí)現(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個(gè)重載簽名描述如何調(diào)用該方法，以及包含正確實(shí)現(xiàn)的實(shí)現(xiàn)簽名

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

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

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

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

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

例如，不要對(duì)可選參數(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ù)重載”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

標(biāo)題名稱：TypeScript中如何寫函數(shù)重載
文章路徑：http://www.muchs.cn/article2/piejic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站改版、軟件開(kāi)發(fā)、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作