快捷導(dǎo)航

TypeScript中的方法重載詳解

更新時(shí)間：2019年04月12日 11:20:28 作者：劉哇勇

這篇文章主要給大家介紹了關(guān)于TypeScript中方法重載的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用TypeScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

方法重載（overload）在傳統(tǒng)的靜態(tài)類型語(yǔ)言中是很常見(jiàn)的。JavaScript 作為動(dòng)態(tài)語(yǔ)言，是沒(méi)有重載這一說(shuō)的。一是它的參數(shù)沒(méi)有類型的區(qū)分，二是對(duì)參數(shù)個(gè)數(shù)也沒(méi)有檢查。雖然語(yǔ)言層面無(wú)法自動(dòng)進(jìn)行重載，但借助其動(dòng)態(tài)的特性，我們可以在代碼中手動(dòng)檢查入?yún)⒌念愋?，或者通過(guò) arguments 獲取到參數(shù)個(gè)數(shù)，從而實(shí)現(xiàn)根據(jù)不同的入?yún)⒆霾煌牟僮鳌?/p>

比如有一個(gè)獲取聊天消息的方法，根據(jù)傳入的參數(shù)從數(shù)組中查找數(shù)據(jù)。如果入?yún)閿?shù)字，則認(rèn)為是 id，然后從數(shù)據(jù)源中找對(duì)應(yīng) id 的數(shù)據(jù)并返回，否則當(dāng)成類型，返回這一類型的消息。

function getMessage(query) {
 if (typeof query === "nunber") {
 return data.find(message => message.id === query);
 } else {
 return data.filter(message => message.type === query);
 }
}

TypeScript 中，假如我們的消息數(shù)據(jù)為如下結(jié)構(gòu)：

type MessageType = "string" | "image" | "audio";

type Message = {
 id: number;
 type: MessageType;
 content: string;
};

上面獲取數(shù)據(jù)的方法等價(jià)于：

function getMessage(
 query: number | MessageType
): Message[] | Message | undefined {
 if (typeof query === "number") {
 return data.find(message => message.id === query);
 } else {
 return data.filter(message => message.type === query);
 }
}

這樣做一是類型書寫上比較丑陋，二是沒(méi)有發(fā)揮出 TypeScript 類型檢查的優(yōu)勢(shì)，這里我們是可以根據(jù)入?yún)⒌念愋兔鞔_知道返回的類型的，即如果傳入的是 id，返回的是單個(gè)數(shù)據(jù)或undefined，如果是根據(jù)類型查找，返回的是數(shù)組。而現(xiàn)在調(diào)用方法后，得到的類型太過(guò)寬泛，這和使用 any 做為返回沒(méi)多大差別。

函數(shù)返回類型不夠緊湊

因?yàn)轭愋偷牟幻骼剩祷氐慕Y(jié)果都不能直接操作，需要進(jìn)行類型轉(zhuǎn)換后才能繼續(xù)。

const result1 = getMessage("audio");
/** 不能直接對(duì) result1 調(diào)用數(shù)組方法 */
console.log((result1 as Message[]).length);

const result2 = getMessage(1);
if (result2) {
 /** 不能對(duì) result2 直接訪問(wèn)消息對(duì)象中的屬性 */
 console.log((result2 as Message).content);
}

重載的實(shí)現(xiàn)

這時(shí)候可通過(guò)提供多個(gè)函數(shù)類型的聲明來(lái)解決上面的問(wèn)題，最后得到的結(jié)果就是間接實(shí)現(xiàn)了函數(shù)的重載。當(dāng)然這個(gè)重載只是 TypeScript 編譯時(shí)的。

function getMessage(id: number): Message | undefined;
function getMessage(type: MessageType): Message[];
function getMessage(query: any): any {
 if (typeof query === "number") {
  return data.find(message => message.id === query);
 } else {
  return data.filter(message => message.type === query);
 }
}

這樣改造后，我們?cè)谡{(diào)用的時(shí)候直接就會(huì)有重載的提示。

實(shí)現(xiàn) TypeScript 的重載后調(diào)用時(shí)的自動(dòng)提示

并且得到的結(jié)果類型是重載方法中指定的入?yún)⑴c返回的組合，在對(duì)結(jié)果進(jìn)行使用時(shí)，無(wú)須再進(jìn)行類型轉(zhuǎn)換。

const result1 = getMessage("audio");
/** ✅ 無(wú)須類型轉(zhuǎn)換 */
console.log(result1.length);

const result2 = getMessage(1);
if (result2) {
 /** ✅ 無(wú)須類型轉(zhuǎn)換 */
 console.log(result2.content);
}

這里需要理解的是，上面添加的函數(shù)類型僅作為 TypeScript 在編譯時(shí)使用的，它不是真的實(shí)現(xiàn)像傳統(tǒng)靜態(tài)類型語(yǔ)言那樣的重載，也不會(huì)改變編譯后代碼的輸出。實(shí)際運(yùn)行時(shí)仍然是不帶重載的 JavaScript 版本。

編譯后的代碼

但這一點(diǎn)也不影響我們?cè)?TypeScript 中使用這種假的重載。

可選參數(shù)

另一個(gè) TypeScript 重載的場(chǎng)景。還是上面獲取消息數(shù)據(jù)的方法，因?yàn)楦鶕?jù)類型查找消息時(shí)，會(huì)返回同類型消息的一個(gè)數(shù)組。此時(shí)我們想加一個(gè)參數(shù)實(shí)現(xiàn)只返回結(jié)果中前幾個(gè)數(shù)據(jù)，那么可以很方便地進(jìn)行如下的改造：

function getMessage(id: number): Message | undefined;
+function getMessage(type: MessageType, count?: number): Message[];
+function getMessage(query: any, count = 10): any {
 if (typeof query === "number") {
  return data.find(message => message.id === query);
 } else {
+  return data.filter(message => message.type === query).splice(0, count);
 }
}

通過(guò)重載，這個(gè)新增的參數(shù)很容易實(shí)現(xiàn)只針對(duì)入?yún)?MessageType 時(shí)，這樣如果我們有如下的調(diào)用，會(huì)得到編譯時(shí)的報(bào)錯(cuò)：

/** 🚨 Argument of type '1' is not assignable to parameter of type 'MessageType' */
getMessage(1,10);

而非重載的版本是享受不到上面提到的類型優(yōu)勢(shì)的。

function getMessage(
 query: number | MessageType,
 count = 10
): Message[] | Message | undefined {
 if (typeof query === "number") {
  return data.find(message => message.id === query);
 } else {
  return data.filter(message => message.type === query).splice(0, count);
 }
}

/** ✅ ojbk, 不錯(cuò)報(bào) */
getMessage(1, 10);

重載過(guò)程

TypeScript 重載的過(guò)程是，拿傳入的參數(shù)和重載的方法簽名列表中由上往下逐個(gè)匹配，直到找到一個(gè)完全匹配的函數(shù)簽名，否則報(bào)錯(cuò)。所以推薦的做法是將簽名更加具體的重載放上面，不那么具體的放后面。

/** ✅*/
function getMessage(type: MessageType, count?: number): Message[];
function getMessage(id: number): Message | undefined;

/** 🚨*/
function getMessage(id: number): Message | undefined;
function getMessage(type: MessageType, count?: number): Message[];

像上面示例中正確做法這樣，如果說(shuō)入?yún)€(gè)數(shù)只有一個(gè)，那可以直接跳過(guò)第一個(gè)函數(shù)簽名，無(wú)須做入?yún)㈩愋偷呐袛唷?/p>

相關(guān)資源