Typescript create array in class then push onto array

Question

I have a number of artworks I want to put into an array of arrays. each artwork has properties I'm trying to describe with a class. I want to create the types with the class and push data onto the array. I'm not sure what the constructor is doing either? I think it should provide a way of creating a new instance of the class?

My ts code is as follows:

class Artwork {
    private _artTitle: string;
    private _slideUrl: string;
    private _artPrice: string; 
    private _artMedium: string; 
    private _artDimensions: string; 
    private _artDesc: string;


  constructor(
        artTitle: string,
        slideUrl: string,
        artPrice: string,
        artMedium: string,
        artDimensions: string,
        artDesc: string
    ){

    this._artTitle = artTitle;
    this._slideUrl = slideUrl;
    this._artPrice = artPrice;
    this._artMedium = artMedium;
    this._artDimensions = artDimensions;
    this._artDesc = artDesc;

    }

  }

    let Artwks: string [];

    Artwks.push(new Artwork());

    Artwks[0].slideUrl = './assets/SBI_Slide_1.jpg';
    Artwks[0].artTitle = "'Surprising Breakfast Ideas'";
    Artwks[0].artPrice = "£400";
    Artwks[0].artMedium = "Acrylic on canvas";
    Artwks[0].artDimensions = '7" x 12"';
    Artwks[0].artDesc = '...Inspired by trailing clauses and footling concerns, this latest injunction into the darkened forest of prevarication yields a miasma of plethoras, tantalising us with a fleeting array of nuances...';



    console.log(Artwks);

FYI you can define something in the constructor as private/protected/public and then access it without having to separately declare class variables and then assign values from the constructor to them. E.g. constructor(private _artTitle: string) — JBC
– JBC, Commented Aug 25, 2017 at 16:35

Titian Cernicova-Dragomir · Accepted Answer · 2017-08-25 18:06:45Z

2

You need to declare the variable and call the constructor for the class like so:

   let Artwks: Artwork []=[];

    Artwks.push(new Artwork("'Surprising Breakfast Ideas'", '', '', '', '', ''));

However if your class has only data I would recommend making it an interface and using json literals to create the array element :

interface Artwork {

    artTitle: string;
    slideUrl?: string; //optional memeber 
    artPrice: string;
    artMedium?: string;
    artDimensions?: string;
    artDesc?: string
}

let Artwks: Artwork []=[];

Artwks.push({
    artTitle: '',
    artPrice: '',
    artDesc: '',
    artDimensions:''
});

This version is a lot more readable, and makes it simpler to maskes some member optional

edited Aug 25, 2017 at 18:06

answered Aug 25, 2017 at 16:34

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

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

5 Comments

Davtho1983 Over a year ago

Ok the interface option is the one I'd prefer, but your code isn't working for me - am I missing something?

Ryan Cavanaugh Over a year ago

This code doesn't work because you didn't initialize the variable

Davtho1983 Over a year ago

I'm using an Angular 4 with angular-cli - I'm not sure how to put an interface into a component? Do I need to put it into a service?

Titian Cernicova-Dragomir Over a year ago

You need to create the array. I edited the code to reflect that

Titian Cernicova-Dragomir Over a year ago

You do not need to put the interface in a service. Just declare it in a module and export it and import it as any other type.

Felipe Koji Waku · Accepted Answer · 2017-08-25 18:21:05Z

1

The following code should work:

 let artworks: Artwks[] = [];

 artworks.push(new Artwork(
 "'Surprising Breakfast Ideas'",
 './assets/SBI_Slide_1.jpg',
 "£400",
 "Acrylic on canvas",
 '7" x 12"',
  '...Inspired by trailing clauses and footling concerns, this latest injunction into the darkened forest of prevarication yields a miasma of plethoras, tantalising us with a fleeting array of nuances...';
 ));

You must fill all the parameters in the constructor to create a new instance of your class

edited Aug 25, 2017 at 18:21

answered Aug 25, 2017 at 16:33

Felipe Koji Waku

4344 silver badges9 bronze badges

Comments

A. AlBoori · Accepted Answer · 2017-08-25 17:20:53Z

0

You can pass the parameters to the constructor to create new instance with properties you specify as follow:

You need also to initiate new empty array before you push the the Artwork object to it.

let Artwks:Array<Artwork>=[];

let artwk = new Artwork("'Surprising Breakfast Ideas'",'./assets/SBI_Slide_1.jpg', "£400", "Acrylic on canvas", '7" x 12"', '...Inspired by trailing clauses and footling concerns, this latest injunction into the darkened forest of prevarication yields a miasma of plethoras, tantalising us with a fleeting array of nuances...');

Artwks.push(artwk);

console.log(Artwks);

edited Aug 25, 2017 at 17:20

answered Aug 25, 2017 at 16:33

A. AlBoori

112 bronze badges

Collectives™ on Stack Overflow

Typescript create array in class then push onto array

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related