如何初始化数组<t>在打字稿/角度？</t>

Question

I have an Angular 8 app.

Below is one of my models in typescript.

export class Movie
{
  title:string;
  tickets: Array<Ticket>;
}

export class Ticket
{
   name:string;
   price:number;
}

In one of the components (movie), when I access the movie object, tickets is not getting initialized.

movie.component.ts

export class MovieComponent
{
  movieObj:Movie;

  constructor()
  {
    this.movieObj = new Movie();
    console.log(this.movieObj); // outputs title value but not tickets
   //console.log(this.movieObj.tickets[0].name); //undefined 
  }
}

While checking the Array type in TypeScript, it's an interface. (We cannot create an object of an interface)

How to initialize the Array in typescript/angular?

Thanks!

Answer 1

You can initialize it in the class itself.

export class Movie
{
  title:string = 'Movie';
  tickets: Array<Ticket> = [{name: 'Ticket', price: 300}];
}

Stackblitz Demo

Answer 2

You can do something like this.

export class Movie
{
  title:string = 'Movie';
  tickets: Ticket[] = [];
}
export class Ticket
{
   name:string;
   price:number;
}

Answer 3

If you want to do some logic while creating tickets, you have to use constructor of Movie class.

You can initialize the property with an empty array of tickets using:

export class Movie
{
  title:string;
  tickets: Ticket[] = [];
}

It doesn't matter using Ticket[] (shorthand syntax) or Array<Ticket> (generic syntax). There isn't any semantic difference and they're completely equivalent.