Typescript - variables declaration

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.

Günter Zöchbauer · Accepted Answer · 2016-10-03 13:05:00Z

5

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')];

edited Oct 3, 2016 at 13:05

answered Oct 3, 2016 at 13:03

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Günter Zöchbauer Over a year ago

Not sure what you mean with the number. I updated my answer.

Fabio Antunes · Accepted Answer · 2016-10-03 13:05:19Z

1

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

answered Oct 3, 2016 at 13:05

Fabio Antunes

22.9k17 gold badges83 silver badges96 bronze badges

1 Comment

Pete Over a year ago

Nice, I like the c# comparison - I guess that's what threw me as I know it's being converted to js, I thought that it was also setting the variable as js doesn't have strongly typed variables in that sense

halfer · Accepted Answer · 2024-03-31 11:22:50Z

1

Your first understanding is right with:

heroes = HEROES

Now:

heroes : Hero [ ];

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

Please note, you can declare (:) any variable with Type, you can't assign (=) Type (in TypeScript) but you can assign that Type of data to variable.

So here you can't use =.

edited Mar 31, 2024 at 11:22

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Oct 3, 2016 at 13:20

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

Comments

Tiba · Accepted Answer · 2016-10-03 18:03:03Z

0

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
}

answered Oct 3, 2016 at 18:03

Tiba

3622 silver badges5 bronze badges

Collectives™ on Stack Overflow

Typescript - variables declaration

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related