Angular2英雄之旅——onSelect(hero: Hero)中的冒号是什么意思？答案

【问题标题】：Angular2 tour of heroes - What does the colon in onSelect(hero: Hero) mean?Angular2英雄之旅——onSelect(hero: Hero)中的冒号是什么意思？
【发布时间】：2017-07-18 02:44:29
【问题描述】：

我正在做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;
    }

请帮忙。

【问题讨论】：

当你使用 (click)="onSelect(hero)" 你发送英雄。英雄类型是英雄。当你使用打字稿时，你需要清除英雄的类型
这是 Typescript 语法 - 查看文档typescriptlang.org/docs/tutorial.html

标签： angular typescript

【解决方案1】：

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

编辑：对于 void 部分，这是您的函数的返回类型。 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”的 Hero 变量。它超出了函数的范围。 'this' 指的是你所在的组件类，它是用来访问它的关键字。因此，要访问函数之外但仍在对象中的变量，请使用关键字“this”。

好的，所以当你点击一个英雄时，OnSelect 函数被触发并且你传递你刚刚点击的英雄（英雄：'Hero'）。然后你要做的是设置你当前对象的英雄（ this.selectedHero ）等于你刚刚点击的英雄（ hero: Hero ）。

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

PS：我对“this”关键字的解释尽可能抽象，以便于理解，我知道它比我解释的要多得多，但这是为了提问的人，因为他是开发新手.

【讨论】：

@Ram void 是函数返回的内容。这意味着这个函数不会返回任何东西，只会做这个函数中声明的事情。
你能解释一下 selectedHero: Hero 是什么意思吗？ onSelect(hero: Hero): void { this.selectedHero = hero; }
让我们continue this discussion in chat。
在我对“this.selectedHero = hero;”部分的理解中，当前对象（this.selectedHero）指向的是刚刚被点击的英雄（hero: Hero），没有收到副本它。我说的对吗？

【解决方案2】：

语法是：

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

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

【讨论】：

嗨，您从哪里获得此信息？请给链接。
查看打字稿文档here。

【解决方案3】：

TypeScript 提供了一些开箱即用的built-in types，如字符串、数字、布尔值等，您还可以创建自定义类型。

与 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 的用法，它是用于保存所选项目的类成员，以便您可以使用它来处理它，例如显示该项目或编辑该项目。

在本例中为selectedHero。当用户选择一个英雄时，您将选择的英雄分配给您的班级成员selectedHero。然后这个 selectedHero 用于突出显示该 Angular 示例中的用户选择。

【讨论】：

谢谢你的朋友。
@Ram 我已经为您的 selectedHero 查询更新了答案。

【解决方案4】：

在 typescript 中，表示 Hero 的类型，类型为 object 'Hero'。

Hero 是一个职业，

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


onSelect(hero: Hero){}

【讨论】：

请解释一下。我不明白。还有那个空白呢？
void 是方法类型，不返回任何东西
@Sajeetharan Hero 并不总是一个界面。我知道松耦合是一个很好的做法，但我认为他对开发还很陌生，这只会让他头疼。我认为 hero 是他示例中的一个类。

【解决方案5】：

当你说

hero: Hero

您将变量的类型限定为“Hero”，这意味着该函数将只接受 Hero 类型的参数或它的抽象。所以，我们就是这样使用的

【讨论】：

【解决方案6】：

我认为“英雄”变量在某种程度上与本教程早期阶段定义的变量（也称为“英雄”）相关。但终于明白不是。

所以我建议尝试一下：

selectedHero: Heroes;

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

【讨论】：