打字稿 - 变量声明

Question

I'm not sure if this is the place for this question, but I've been told code review is not the place for it.

I'm just learning Angular 2 and Typescript, so am working through this following tutorial:

https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

Between part three and four, the declaration of the heroes variable in the app.component.ts changes from:

export class AppComponent {
    heroes = HEROES;
}

to:

export class AppComponent {
    heroes: Hero[];
}

I understand the first one sets it to a constant of heroes array but why does the second one use a colon and not just set it to an empty array?

Changing the second one to an = actually throws an expression expected error so basically I'm just trying to understand the differences between the two.

Answer 1

heroes: Hero[];

doesn't set it to a value. It just defines a property with

• name = heroes
• type = Hero[] which means array of Hero
• without assigning a value which keeps it at default value null .

With initialization it would look like

heroes: Hero[] = [new Hero('Spidey'), new Hero('Batman')];

Answer 2

The difference between the two is that the first one is javascript, you are assigning your heroes variable to the constant **HEROES*.

The second one it's a typescript thing, you are saying that the heroes variable will be an array of heroes, basically you are defining an empty variable.

It's like java or c# where you do something like public int myNumber on your class

Answer 3

Your first understanding is right with

heroes = HEROES

Now,

heroes : Hero [ ];

Here Hero reprents class which holds certain properties. by this line, you are telling typescript compiler that heroes variable will hold list of objects having type of Hero (custom or user defined type) . In OOP world class is a user defined dataType and according that you can declare any variable with that Type.

Please note , you can declare(:) any varaiable with Type, you cant assing(=) Type (in Typescript) but you can assign that Type of data to variable.

So here you cant use = .

I hope this will help you...

Answer 4

Just complementing @Günter Zöchbauer,

in class/interface declarations, : after a property name is used to define its type.

However, this might cause a little confusion when you're creating an object on-the-fly, which, in this case, : marks value assignment:

interface MyInterface {
  myBooleanProperty: boolean = false;
}

// ... somewhere

let a = {
  myBooleanProperty: true
};

// and to add a little more fun

let b: MyInterface = {
  myBooleanProperty: true
}