• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

什么是TypeScript的ModuleAugmentation

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

在进入模块扩充之前,让我们看看一些 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 不允许在类之间合并,所以我们不能创建两个或多个同名的类。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap