Angular2 tour of heroes - What does the colon in onSelect(hero: Hero) mean?

Question

I am doing Angular2 tour of heroes project https://angular.io/docs/ts/latest/tutorial/toh-pt2.html .

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

Here i can alert the the current hero name and id using the following function

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

But why in the official tutorial it is using

onSelect(hero: Hero){

    }

why hero: Hero ?

also what is the meaning of onSelect(hero: Hero): void { } .

what is the meaning of

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

Please help .

Answer 1

When you type 'hero', it will assume it has the type 'any'. When you say hero: Hero, you delimit the type of the variable to a 'Hero', which means the function will only accept parameters of the type Hero or abstractions of it.

EDIT: for the void part, this is the return type of your function. Void means it will return nothing.

EDIT2:

selectedHero: Hero

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

so the 'selectedHero: Hero' part you define a variabel 'selectedHero' of the type 'Hero'.

The you define your function 'OnSelect', which accepts a parameter 'hero' of the type 'Hero'. 'hero' will be the name you use to access the parameter in the function 'OnSelect'.

The function returns void, which means it returns nothing, and just does what is stated in the function.

the part this.selectedHero = hero; is trickier. Above in your component you defined a Hero variable with the name 'hero'. It is outside of the function's scope. 'this' refers to the component class you are in, it's a keyword used to access it. So to access a variable which is outside of your function, but still in your object, you use the keyword 'this'.

Ok so when you click a hero, the OnSelect function gets triggered and you pass on the hero you just clicked ( the hero: 'Hero'). What you then do is set the hero of your current object ( this.selectedHero ) equals to the hero you just clicked ( hero: Hero ).

Every time you click on a hero, it will replace the selectedHero with the one you clicked.

PS: My explanation of the 'this' keyword is made as abstract possible to comprehend, I know there's a lot more to it then i explained, but this was for the sake of the person asking, as he is new to developing.

Answer 2

Syntax is:

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

EDIT: Check out the typescript documentation here.

Answer 3

TypeScript provides some built-in types out of the box like String, Number, Boolean, any and you can also create custom types.

Unlike JavaScript, you can have strong typing support with TypeScript that gives you compile time error checking.

Strong typing can ensure that you always pass the correct number of parameters as well as the correct type of parameters to a method.

You can create a custom type by using a class or an interface.

Let's create a custom interface type named Hero:

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

You can now use this type to set a type on a method's parameter like this:

onSelect(hero: Hero): void {

}

If you pass any other value that is not of type Hero to this method, you will have compile time error.

void is an indication that this method does not return anything. You can return any object from this method and can also specify the same type by replacing the void keyword. Example:

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

Overall, typescript provides good strong typing support that can save you lots of time as the error is encountered while you write code instead of finding this issue at run-time like JavaScript.

Play with this TypeScript playground here to learn more about TypeScript.

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

You will often find usage of selectedItem in application like these which is a class member to save the selected item so that you can use it to work with it say for displaying that item or edit that item.

In this example it is selectedHero. When user selects a hero, you assign that selected hero to your class member selectedHero. And then this selectedHero is used to highlight user selection in that Angular example.

Answer 4

In typescript , it indicates the type of Hero, which is of type object 'Hero'.

Where Hero is a class,

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


onSelect(hero: Hero){}

Answer 5

When you say

hero: Hero

you delimit the type of the variable to a 'Hero', which means the function will only accept parameters of the type Hero or abstractions of it. So, we are using like that

Answer 6

I thought that 'hero' variable is related somehow to variables defined at earlier stages of the tutorial (that were also called 'hero'). But finally understood that it's NOT.

So I'd recommend trying out:

selectedHero: Heroes;

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