angular - Angular2 rundtur av hjältar - Vad betyder kolon i onSelect(hero: Hero)?

Jag håller på med Angular2-tour of heroes-projektet https://angular.io/docs/ts/latest/tutorial/toh-pt2.html.

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

Här kan jag varna det nuvarande hjältenamnet och ID:t med följande funktion

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

Men varför använder den det i den officiella handledningen

onSelect(hero: Hero){

    }

varför hjälte: Hjälte ?

också vad är betydelsen av onSelect(hero: Hero): void { } .

vad betyder

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

Vänligen hjälp.

Svar #1

När du skriver 'hero' kommer det att anta att det har typen 'any'. När du skriver hero: Hero avgränsar du typen av variabeln till en 'Hero', vilket betyder att funktionen endast kommer att acceptera parametrar av typen Hero eller dess abstraktioner.

REDIGERA: för void-delen, detta är returtypen på din funktion. Void betyder att den inte kommer att returnera något.

REDIGERA2:

selectedHero: Hero

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

så delen 'selectedHero: Hero' definierar du en variabel 'selectedHero' av typen 'Hero'.

Sedan definierar du din funktion 'OnSelect', som accepterar en parameter 'hero' av typen 'Hero'. 'hero' kommer att vara namnet du använder för att komma åt parametern i funktionen 'OnSelect'.

Funktionen returnerar void, vilket betyder att den inte returnerar något, och gör bara det som anges i funktionen.

delen this.selectedHero=hero; är krångligare. Ovan i din komponent definierade du en Hero-variabel med namnet 'hero'. Den ligger utanför funktionens scope. 'this' refererar till den komponentklass du är i, det är ett nyckelord som används för att komma åt den. Så för att komma åt en variabel som ligger utanför din funktion, men fortfarande i ditt objekt, använder du nyckelordet 'this'.

Okej, så när du klickar på en hjälte triggas OnSelect-funktionen och du skickar vidare hjälten du just klickade på (hjälten: 'Hero'). Vad du sedan gör är att sätta hjälten för ditt nuvarande objekt (this.selectedHero) lika med hjälten du just klickade på (hjälten: Hero).

Varje gång du klickar på en hjälte kommer det att ersätta den valda hjälten med den du klickade på.

PS: Min förklaring av nyckelordet 'this' är gjord så abstrakt som möjligt för att förstå, jag vet att det finns mycket mer än vad jag förklarade, men detta var för den som frågade, eftersom han är ny inom utveckling.

Svar #2

Syntax är:

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

REDIGERA: Kolla in Typescript-dokumentationen här.

Relaterade artiklar