Angular2英雄之旅 - onSelect中的冒号是什么(英雄: Hero) mean?

Question

我正在做 Angular2 英雄之旅项目 https://angular.io/docs/ts/latest/tutorial/toh-pt2.html.

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">{{hero.name}}</li> 

这里我可以使用下面的函数提醒当前英雄的名字和id

onSelect(hero) {
        alert(hero.id);
   }

但是为什么在官方教程中是用

onSelect(hero: Hero){

    }

为什么英雄:英雄？

还有 onSelect(hero: Hero): void { } 的含义是什么。

什么意思

selectedHero: Heroes;
      onSelect(hero: Heroes): void {
      this.selectedHero = hero;
    }

请帮忙。

Answer 1

当您键入“hero”时，它会假定它的类型为“any”。当你说 hero: Hero 时，你将变量的类型限定为“Hero”，这意味着该函数将只接受 Hero 类型的参数或其抽象。

编辑:对于 void 部分，这是函数的返回类型。 Void 表示它不会返回任何内容。

编辑2:

selectedHero: Hero

OnSelect(hero: Hero): void{
    this.selectedHero = hero;
}

因此，您在“selectedHero: Hero”部分定义了一个类型为“Hero”的变量“selectedHero”。

您定义函数“OnSelect”，它接受类型为“Hero”的参数“hero”。 “英雄”将是您用来访问“OnSelect”函数中的参数的名称。

该函数返回 void，这意味着它不返回任何内容，只执行函数中声明的操作。

这部分 this.selectedHero = hero;更棘手。在您的组件上方，您定义了一个名为“hero”的 Hero 变量。它超出了函数的范围。 'this' 指的是您所在的组件类，它是用于访问它的关键字。因此，要访问函数之外但仍在对象中的变量，请使用关键字“this”。

好的，当您点击一个英雄时，OnSelect 函数被触发，您传递您刚刚点击的英雄(英雄:'Hero')。然后，您要做的是将当前对象 (this.selectedHero) 的英雄设置为您刚刚单击的英雄 (hero: Hero)。

每次你点击一个英雄，它会用你点击的英雄替换selectedHero。

PS:我对“this”关键字的解释尽可能抽象，我知道还有很多内容然后我解释了，但这是为了提问的人，因为他是开发新手.