打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
什么是 TypeScript 的 Module Augmentation

在进入模块扩充之前,让我们看看一些 TypeScript 合并原则,这些原则将随着我们的进步而变得有用。

TypeScript 支持创建同名的 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。 这是因为,接口与类合并了。

但如果 interface 里包含的是方法,结果又如何?

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原型中。

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

之后 bake 方法调用就能够工作了:

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

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

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

export class Pet {
  name: string;

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

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

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

import { Pet } from "./pet";

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

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

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

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

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

现在我们可以调用 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

现在你可能想知道,与其先声明一个接口,然后在 Pet 原型中添加 walk 方法的实现,为什么我们不直接声明一个同名的类,这样当类被初始化时,我们将拥有来自两者的方法 课?

答案是,TypeScript 不允许在类之间合并,所以我们不能创建两个或多个同名的类。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
【Typescript】类,类的继承以及成员修饰符(6)
JavaOOP ( 三 ) 多态
龙虾芝士焗意面
港式黄金芝士鸡肉卷
芒果芝士蛋糕Bake Mango Cheese Cake
这家讲究的芝士挞店,竟然是靠不按套路出牌的设计火遍全球的!
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服