TypeScript: Colon vs Equal To (Angular Tutorial)
I am learning Angular4 and going through sample tutorials.
https://angular.io/docs/ts/latest/tutorial/toh-pt1.html
The tutorial shows the code below.
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;
}
The code defines 2 classes: AppComponent and Hero. I can't figure out why, to declare class membership, AppComponent follows the property = value style while the Hero class uses the property: value style
If I change the AppComponent class to 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 what is the difference between using :
and using =
and when which should be used?
source to share
Look again at AppComponent
:
export class AppComponent {
title = 'Tour of Heroes';
hero: Hero = {
id: 1,
name: 'Windstorm'
};
}
First field definition:
title = 'Tour of Heroes';
assigns a string value. Since this value is a string, TS can infer the type. The line is equivalent:
title: string = 'Tour of Heroes';
Second field definition
hero: Hero = {
id: 1,
name: 'Windstorm'
};
assigns an object that can be any
. So here, in order to get the most out of TS, we have to be specific about what will happen. It can also be written:
hero = {...} as Hero;
or you can inline the definition rather than call it:
hero: { id: number, name: string } = {...};
In the class, Hero
you only set types, default values. The pattern is actually the same for both:
name[: type][ = value];
It is probably worth looking into the TS reference for more information on types and class definitions.
source to share
:
used in JSON for a value, for example:
{ name: "name value" };
:
also used in typescript to determine the type of objects. For example:
myObj: JSON;
=
used to do a job outside of JSON.
myObj: JSON = { name: "name value" }; // meaning myObj has type JSON and is equal to { name: "name value" };
Problems in the code:
title : 'Tour of Heroes', <-- Here you are making titles **type** 'Tour of Heroes'
I suggest you read the basic typescript documentation: https://www.typescriptlang.org/docs/handbook/basic-types.html
source to share
I would say that it is a 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>
, whatever causes a type error.
Here you can see that it was used as a type to create a new Hero type:
hero: Hero = {
id: 1,
name: 'Windstorm'
};
source to share
export class AppComponent {
title = 'Tour of Heroes'; // here you assign a value to var.
hero: Hero = {
id: 1,
name: 'Windstorm'
};
}
export class Hero {
id: number; // <= here you are declaring a var to be a string but without value
name: string;
}
you don't need to declare primitives if you are assigning a value (number, string, boolean) right away.
source to share