在進(jìn)入模塊擴(kuò)充之前，讓我們看看一些 TypeScript 合并原則，這些原則將隨著我們的進(jìn)步而變得有用。

TypeScript 支持創(chuàng)建同名的 class 和 interface：

class Food {cheese: string; }interface Food {bacon: string; }const food = new Food(); food.bacon = "nice bacon"; food.cheese = "sweet cheese";console.log(food); // {bacon: "nice bacon", cheese: "sweet cheese"}

在我們上面的例子中，我們可以看到，即使在 Food 類中只聲明了 cheese，食物變量也包含 bacon 和 cheese。 這是因?yàn)?#xff0c;接口與類合并了。

但如果 interface 里包含的是方法，結(jié)果又如何？

class Food {cheese: string; }interface Food {bacon: string;bake(item: string); }const food = new Food();food.bake("cake"); // Error: food.bake is not a function

但是，bake 方法會(huì)在intelliSense 的幫助下顯示在food 變量上，因?yàn)镕ood 類和接口Food 將合并，調(diào)用bake 方法會(huì)導(dǎo)致錯(cuò)誤，因?yàn)榻涌谥话暶鞫话瑢?shí)現(xiàn)。 為了解決這個(gè)問題，我們可以將bake的實(shí)現(xiàn)添加到Food原型中。

Food.prototype.bake = (item) => console.log(item);

之后 bake 方法調(diào)用就能夠工作了：

food.bake("cake"); // cake

模塊擴(kuò)充幫助我們將功能擴(kuò)展到我們可能無(wú)法訪問的第三方庫(kù)或其他文件中的類。

假設(shè)我們有一個(gè)帶有 name 屬性和 feed 方法的 Pet 類。

export class Pet {name: string;feed(feedType: string) {console.log(feedType);} }

然后我們決定將這個(gè)類導(dǎo)入到我們的 index.ts 文件中，但不是只使用 Pet 類中的方法和屬性，我們想要添加更多功能。 我們可以使用模塊擴(kuò)充來(lái)做到這一點(diǎn)。

首先，我們將 Pet 類導(dǎo)入到 index.ts 文件中。

import { Pet } from "./pet";

./pet 是一個(gè)模塊。 為了擴(kuò)展它，我們聲明了一個(gè)使用相同名稱的模塊，在該模塊中，我們將聲明一個(gè)與我們嘗試擴(kuò)展的類同名的接口。 在接口中，我們將包含要添加到擴(kuò)展類的屬性和方法。

declare module "./pet" {interface Pet {age: number;walk(location: string);} }

TypeScript 將合并 Pet 類和 Pet 接口，因?yàn)樗鼈兛梢栽谕粋€(gè) ./pet 模塊中找到。

但這還不是全部。 記住我解釋過，接口不包含方法的實(shí)現(xiàn)，而只包含它們的聲明。 為此，我們將在 Pet 的原型中添加 walk 方法的實(shí)現(xiàn)。

Pet.prototype.walk = (location:string) => `Likes to walk in the ${location}`

現(xiàn)在我們可以調(diào)用 Pet 類中的方法和屬性以及新聲明的 Pet 接口。

const pet = new Pet();pet.name = "Looty"; pet.age = 3;pet.feed("bacon"); // bacon console.log(pet.name = "Looty"); // Looty console.log(pet.age = 3); // 3 console.log(pet.walk("park")); // Likes to walk in the park

現(xiàn)在你可能想知道，與其先聲明一個(gè)接口，然后在 Pet 原型中添加 walk 方法的實(shí)現(xiàn)，為什么我們不直接聲明一個(gè)同名的類，這樣當(dāng)類被初始化時(shí)，我們將擁有來(lái)自兩者的方法 課？

答案是，TypeScript 不允許在類之間合并，所以我們不能創(chuàng)建兩個(gè)或多個(gè)同名的類。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的什么是 TypeScript 的 Module Augmentation的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。