示例代码：在angular2中进行模拟 [英] sample code: making mocks in angular2

问题描述

我正在学习Angular2。
在DI页面中，有用于模拟的示例代码。
https://angular.io/docs/ts/latest /guide/dependency-injection.html

I am learning Angular2. In DI pages, there is sample code for mocking. https://angular.io/docs/ts/latest/guide/dependency-injection.html

这是什么意思

let mockService = <HeroService> {getHeroes: () => expectedHeroes }

看起来像定义 mockService 函数来自 HeroService 函数。

It looks like define mockService function from HeroService function.

什么是< HeroService> ？是< HeroService> 强制转换吗？

What is <HeroService>? Is <HeroService> casting?

let expectedHeroes = [{name: 'A'}, {name: 'B'}]
let mockService = <HeroService> {getHeroes: () => expectedHeroes }

it('should have heroes when HeroListComponent created', () => {
  let hlc = new HeroListComponent(mockService);
  expect(hlc.heroes.length).toEqual(expectedHeroes.length);
});

推荐答案

要添加到JB Nizet的答案，并对代码背后的原因进行了一些解释。

To add to JB Nizet's answer and to give a little explanation on the reasoning behind the code.

TypeScript使用<一个href = https://en.wikipedia.org/wiki/Structural_type_system rel = nofollow noreferrer>结构类型系统 ¹ 。这意味着，如果它像鸭子一样嘎嘎叫，那么它就可以被认为是鸭子（或更准确地说，是与鸭子兼容）。例如，

TypeScript uses Structural Type System¹. What this means is that if it quacks like a duck, then it can be considered a duck (or more precisely, be compatible with a duck). Take for example

class Duck {
  quack() { }
}

let duck = {
  quack: () => {}
}

由于鸭子具有 quack 方法，您可以将其传递给需要 Duck 的任何对象，例如

Since duck has a quack method, you can pass it to anything that expects a Duck, like

function doQuack(duck: Duck) {
  duck.quack();
}

doQuack(duck);

TypeScript非常聪明，可以知道鸭子对象文字可被视为 Duck ，即使我们从未真正使用<$ c $创建 Duck 的实例c> duck = new Duck（）。这是因为 duck 的结构足以与 Duck 类型兼容，因为它与结构匹配；该结构只是单个 quack 方法。

TypeScript is smart enough to know that the duck object literal can be considered a Duck even if we never actually create an instance of a Duck using duck = new Duck(). This is because the structure of duck is enough to be compatible with the Duck type, because it matches the structure; the structure being only a single quack method.

如果我们尝试键入 Duck 作为 Duck ，而我们没有 quack 方法，那么我们将

If we were to try to type duck as Duck, and we didn't have the quack method, then we would get a compile error.

let duck: Duck = {   // compile error
  mooo: () => {}
};

let duck: Duck = {
  quack: () => {}    // OK
}

在您的示例中， HeroSerivce 有两种方法，一种是获取所有英雄，另一种是通过id获取英雄。

That being said, with your example, the HeroSerivce has two methods, one to get all the heroes, and one to get a hero by id.

class HeroService {
  getHeroes(): Hero[] { .. }
  getHeroById(id: number): Hero { .. }
}

还有一个 HeroComponent ，其构造函数接受 HeroService

And a HeroComponent with a constructor that accepts a HeroService

class HeroComponent {
  constructor(heroService: HeroService) {}
}

现在，如果我们尝试通过以下内容

Now if we try to pass the following

let mockService = { getHeroes: () => expectedHeroes }

到 HeroComponent 构造函数，我们会出现编译错误，因为 mockService 与 HeroService 的结构不匹配。它只有一个 getHeroes 方法，而结构实际上由两个方法组成，即 getHeroes 和 getHero 。

to the HeroComponent constructor, we will get a compile error because the mockService doesn't match the structure of a HeroService. It only has the one getHeroes method, when the structure actually consists of two methods, getHeroes and getHero.

因此，为了强制编译器只接受它，我们将其投射到< HeroService> 。

So to force the compiler to just accept it, we "cast" it to <HeroService>.

我们可以通过以下内容（无需投射），因为它匹配

We could pass the following (without "casting") and it would work, because it matches the structure.

let mockService = {
  getHeroes: () => expectedHeroes,
  getHero: (id: number) => null
};

---

_{1 -从TypeScript文档章节类型兼容性} 中了解更多信息

---

_{1 - Read more from TypeScript documentation chapter Type Compatibility}

这篇关于示例代码：在angular2中进行模拟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！