Question

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

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

在这里，我可以使用以下功能提醒当前的英雄姓名和身份

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类型的参数或它的抽象。

编辑：对于void部分，这是函数的返回类型。虚空意味着它什么都不返回。

EDIT2：

selectedHero: Hero

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

所以'selectedHero：Hero'部分你定义了'Hero'类型的变量'selectedHero'。

你定义你的函数'OnSelect'，它接受'Hero'类型的参数'hero'。 'hero'将是您在“OnSelect”函数中用于访问参数的名称。

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

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

好的，当你点击一个英雄时，OnSelect功能会被触发，你传递你刚刚点击的英雄（英雄：'英雄'）。你接下来要做的是设置当前对象的英雄（this.selectedHero）等于你刚刚点击的英雄（英雄：英雄）。

每次点击英雄时，它都会将selectedHero替换为您点击的英雄。

PS：我对'this'关键字的解释是抽象的，可以理解，我知道还有更多内容然后我解释，但这是为了这个人的问题，因为他是新手。

Answer 2

语法是：

methodName(variable: Class): returnType {
    // your code here
}

编辑：查看打字稿文档here。

Answer 3

在打字稿中，它表示英雄的类型，类型为对象＆＃39;英雄＆＃39;。

Hero是一个班级，

export class Hero {
    id: number;
    name: string;
}


onSelect(hero: Hero){}

Answer 4

TypeScript提供了一些开箱即用的built-in types，如String，Number，Boolean，any，您还可以创建自定义类型。

与JavaScript不同，您可以使用TypeScript提供强大的输入支持，以便进行编译时错误检查。

强类型可以确保始终将正确数量的参数以及正确类型的参数传递给方法。

您可以使用class或interface创建自定义类型。

让我们创建一个名为Hero的自定义界面类型：

class Hero {
    id: number;
    name: string;
}

您现在可以使用此类型在方法的参数上设置类型，如下所示：

onSelect(hero: Hero): void {

}

如果将任何其他非Hero类型的值传递给此方法，则会出现编译时错误。

void表示此方法不返回任何内容。您可以从此方法返回任何对象，也可以通过替换void关键字指定相同的类型。例如：

onSelect(hero: Hero): boolean {
    return false;
}

总的来说，typescript提供了良好的强类型支持，可以节省大量时间，因为在编写代码时遇到错误而不是像JavaScript那样在运行时发现此问题。

使用此TypeScript playground here来了解有关TypeScript的更多信息。

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

您经常会在应用程序中找到selectedItem的用法，这些是保存所选项目的类成员，以便您可以使用它来表示显示该项目或编辑该项目。“ p>

在此示例中，它是selectedHero。当用户选择英雄时，您将所选英雄分配给您的班级成员selectedHero。然后，此selectedHero用于突出显示该Angular示例中的用户选择。

Answer 5

当你说

时

hero: Hero

你将变量的类型划分为＆＃39; Hero＆＃39;，这意味着该函数只接受Hero类型的参数或它的抽象。所以，我们正在那样使用

Answer 6

我认为'hero'变量某种程度上与本教程早期阶段定义的变量（也称为'hero'）相关。但最后明白不是。

所以我建议尝试：

selectedHero: Heroes;

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

Angular2英雄之旅 - onSelect（英雄：英雄）中的冒号是什么意思？

6 个答案: