在進入[模組擴充](https://www.digitalocean.com/community/tutorials/typescript-module-augmentation)之前，讓我們看看一些 TypeScript 合併原則，這些原則將隨著我們的進步而變得有用。

TypeScript 支援建立同名的 class 和 interface：

```typescript
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。 這是因為，介面與類合併了。

但如果 interface 裡包含的是方法，結果又如何？

```typescript
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 方法會在intelliSense 的幫助下顯示在food 變數上，因為Food 類和介面Food 將合併，呼叫bake 方法會導致錯誤，因為介面只包含宣告而不包含實現。 為了解決這個問題，我們可以將bake的實現新增到Food原型中。

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

之後 bake 方法呼叫就能夠工作了：

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

模組擴充幫助我們將功能擴充套件到我們可能無法訪問的第三方庫或其他檔案中的類。

假設我們有一個帶有 name 屬性和 feed 方法的 Pet 類。
```typescript
export class Pet {
  name: string;

feed(feedType: string) {
    console.log(feedType);
  }
}
```

然後我們決定將這個類匯入到我們的 index.ts 檔案中，但不是隻使用 Pet 類中的方法和屬性，我們想要新增更多功能。 我們可以使用模組擴充來做到這一點。

首先，我們將 Pet 類匯入到 index.ts 檔案中。

```typescript
import { Pet } from "./pet";
```

./pet 是一個模組。 為了擴充套件它，我們宣告瞭一個使用相同名稱的模組，在該模組中，我們將宣告一個與我們嘗試擴充套件的類同名的介面。 在介面中，我們將包含要新增到擴充套件類的屬性和方法。

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

TypeScript 將合併 Pet 類和 Pet 介面，因為它們可以在同一個 ./pet 模組中找到。

但這還不是全部。 記住我解釋過，介面不包含方法的實現，而只包含它們的宣告。 為此，我們將在 Pet 的原型中新增 walk 方法的實現。

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

現在我們可以呼叫 Pet 類中的方法和屬性以及新宣告的 Pet 介面。

```typescript
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
```

現在你可能想知道，與其先宣告一個介面，然後在 Pet 原型中新增 walk 方法的實現，為什麼我們不直接宣告一個同名的類，這樣當類被初始化時，我們將擁有來自兩者的方法 課？

答案是，TypeScript 不允許在類之間合併，所以我們不能建立兩個或多個同名的類。

什麼是 TypeScript 的 Module Augmentation

相關文章