I am learning Angular4 and going through the tutorial examples.
https://angular.io/docs/ts/latest/tutorial/toh-pt1.html
I have the below code in the tutorial.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>`
})
export class AppComponent {
title = 'Tour of Heroes'; // *1
hero: Hero = {
id: 1,
name: 'Windstorm'
};
}
export class Hero {
id: number; // *2
name: string;
}
In the code 2 classes are defined, AppComponent and Hero. I am not able to understand why for member declaration of a class, AppComponent follows the style property = value while class Hero uses style property : value
If I change the class AppComponent to the below, the code doesn't work as expected.
export class AppComponent {
title : 'Tour of Heroes',
hero: Hero : {
id: 1,
name: 'Windstorm'
};
}
I would like to know whats the difference between using : and using = and when what should be used ?
Look again at the AppComponent:
export class AppComponent {
title = 'Tour of Heroes';
hero: Hero = {
id: 1,
name: 'Windstorm'
};
}
The first field definition:
title = 'Tour of Heroes';
is assigning a string value. Because that value is a string, TS can infer the type. The line is equivalent to:
title: string = 'Tour of Heroes';
The second field definition
hero: Hero = {
id: 1,
name: 'Windstorm'
};
is assigning an object, which could be any type. So here, to get the most out of TS, we should be specific about the kind of thing it will be. It could also be written:
hero: { id: number, name: string } = {...};
In the Hero class, you're only setting types, no default values. The pattern is actually the same in both:
name[: type][ = value];
It's probably worth having a look in the TS handbook for more information about types and class definitions.
: is used in JSON for value, example:
{ name: "name value" };
: is also used in typescript to define an objects type. For example:
myObj: JSON;
= is used to make an assignment outside of the JSON.
myObj: JSON = { name: "name value" }; // meaning myObj has type JSON and is equal to { name: "name value" };
The problems in your code:
title : 'Tour of Heroes', <-- Here you are making titles **type** 'Tour of Heroes'
I suggest you to read the basic documentation of typescript: https://www.typescriptlang.org/docs/handbook/basic-types.html
I would say it is kind of interface but instead of implementing it you can use this class as a type:
export class Hero {
id: number; // *2
name: string;
}
let a: Hero = 'some call to create new hero';
It will ensure that the object is a type <Hero> anything else will be cause
in type error.
Here you can see it is been used as a type to create a new Hero of type Hero:
hero: Hero = {
id: 1,
name: 'Windstorm'
};