TypeScript中的模块扩充

在进入模块扩充之前，让我们看一些 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 变量同时包含 bacon 和 cheese，尽管在 [ 中仅声明了 cheese X151X] 类。这是因为，接口与类合并。

但是如果我们的接口包含一个方法，例如，bake

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 方法将在智能感知的帮助下显示在 food 变量上，因为类 Food 和接口 [ X158X] Food 将被合并，调用 bake 方法将导致错误，因为接口只包含声明而不包含实现。为了解决这个问题，我们可以将 bake 的实现添加到 Food 原型中。

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

现在调用 bake 方法将起作用。

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

进入模块扩充

模块扩充 帮助我们将功能扩展到我们可能无法访问的第三方库或其他文件中的类。

假设我们有一个具有 name 属性和 feed 方法的 Pet 类。

宠物.ts

export class Pet {
  name: string;

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

然后我们决定将这个类导入到我们的 index.ts 文件中，但不是只使用 Pet 类中的方法和属性，而是要添加更多功能。我们可以使用 模块增强 来做到这一点。

首先，我们将 Pet 类导入到我们的 index.ts 文件中。

索引.ts

import { Pet } from "./pet";

./pet 是一个模块。为了扩展它，我们声明了一个使用相同名称的模块，并且在该模块中，我们将声明一个与我们尝试扩展的类同名的接口。在接口中，我们将包含我们想要添加到扩展类的属性和方法。

索引.ts

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

TypeScript 将合并 Pet class 和 Pet interface 因为它们可以在同一个 ./pet 模块中找到。

但这还不是全部。记得我解释过，接口不包含方法的实现，而只包含它们的声明。为此，我们将 walk 方法的实现添加到 Pet 的 prototype 中。

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

现在我们可以调用在 Pet 类和新声明的 Pet 接口中找到的方法和属性。

索引.ts

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

现在你可能想知道，不是声明一个接口然后将 walk 方法的实现添加到 Pet 原型中，我们为什么不直接声明一个具有相同名称的类，这样当类被初始化了，我们会有两个类的方法吗？

答案是，TypeScript 不允许在类之间进行合并，因此我们不能创建两个或多个具有相同名称的类。如果你想合并类，有一个使用 TypeScript mixins 的解决方法，在这篇文章中讨论了，或者你可以使用我为此创建的库。

就是这样。希望这很有用。 😎👌