Question

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

是什么意思

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

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

什么是<HeroService>？是<HeroService>施放吗？

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);
});

Answer 1

添加到JB Nizet's answer并对代码背后的原因进行一些解释。

TypeScript使用Structural Type System ¹。这意味着，如果它像鸭子一样嘎嘎叫，那么它可以被认为是一只鸭子（或者更确切地说，与鸭子是兼容的）。举个例子

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

由于class Duck { quack() { } } let duck = { quack: () => {} }有duck方法，您可以将其传递给任何需要quack的内容，例如

Duck

TypeScript足够聪明，即使我们从未使用function doQuack(duck: Duck) { duck.quack(); } doQuack(duck);实际创建duck的实例，也可以将Duck对象文字视为Duck。这是因为duck = new Duck()的结构足以与duck类型兼容，因为它与结构相匹配;结构只是一个Duck方法。

如果我们尝试将quack键入duck，并且我们没有Duck方法，那么我们会收到编译错误。

quack

话虽如此，在你的例子中，let duck: Duck = { // compile error mooo: () => {} }; let duck: Duck = { quack: () => {} // OK }有两种方法，一种是获取所有英雄，另一种是通过id获得英雄。

HeroSerivce

一个class HeroService { getHeroes(): Hero[] { .. } getHeroById(id: number): Hero { .. } }，其构造函数接受HeroComponent

HeroService

现在，如果我们尝试传递以下内容

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

到let mockService = { getHeroes: () => expectedHeroes }构造函数，我们将收到编译错误，因为HeroComponent与mockService的结构不匹配。当结构实际上由两个方法HeroService和getHeroes组成时，它只有一个getHeroes方法。

因此，为了强制编译器接受它，我们＆＃34; cast＆＃34;它到getHero。

我们可以传递以下内容（没有＆＃34;施放＆＃34;）它会起作用，因为它与结构相匹配。

<HeroService>

_{1 - 阅读TypeScript文档章节Type Compatibility}

中的更多内容

Answer 2

在JavaScript和TypeScript中，{a: b}是一个对象文字。它定义了一个对象，其中一个属性a的值为b。

所以

{getHeroes: () => expectedHeroes }

是一个对象，其中一个属性名为getHeroes，其值为() => expectedHeroes() => expectedHeroes。因此，该值是一个不带参数的函数（()）并返回值expectedHeroes。

<HeroService>称为type assertion：

有时你最终会遇到一个比TypeScript更了解价值的情况。通常，当您知道某个实体的类型可能比其当前类型更具体时，就会发生这种情况。

类型断言是告诉编译器的一种方式“相信我，我知道我在做什么。”类型断言就像在其他语言中使用类型转换，但不执行特殊的数据检查或重组。它没有运行时影响，纯粹由编译器使用。

示例代码：在angular2中制作模拟

2 个答案: