Add objects to an array in typescript

Question

When a user clicks some items on my web page, I want to store the item details in an array of objects like this:

[{ "color": "blue", "shape": "square" } , { "color": "red", "shape": "triangle" }]

However, the following code throws an error when I try to push(tempObj):

export class MyComponent implements OnInit {
  itemsClicked: {color: string, shape: string}[] = [];

  ngOnInit(): any { }

  onItemClick(color, shape) {
    let tempObj = {};
    tempObj["color"] = color;
    tempObj["shape"] = shape;
    this.itemsClicked.push(tempObj);
  }
}

Error:

Argument of type '{}' is not assignable to parameter of type '{ color: string; shape: string; }'.

You need to declare the type of tempObj to be the same as {color: string, shape: string}. — crashmstr
– crashmstr, Commented Jan 15, 2021 at 15:55
You have edited the question and now the answer given doesn't fit this. Please don't do that - if you have a new question ask it separately. — VLAZ
– VLAZ, Commented Jan 15, 2021 at 16:03
Probably just a question typeo, and probably not causing the error, but colour and color and not the same spelling for variable names. — Get Off My Lawn
– Get Off My Lawn, Commented Jan 15, 2021 at 16:42

Aplet123 · Accepted Answer · 2021-01-15 15:41:28Z

2

[] is not an array of any type, it's an empty array, so you can't push anything to it. Give it an actual type:

itemsClicked: {color: string, shape: string}[]

Also make sure you assign it in the constructor.

answered Jan 15, 2021 at 15:41

Aplet123

35.8k1 gold badge41 silver badges66 bronze badges

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

4 Comments

dom_ahdigital Over a year ago

How to assign in constructor?

Aplet123 Over a year ago

Either add a constructor like constructor() { this.itemsClicked = []; } or let typescript desugar it for you with itemsClicked: {color: string, shape: string}[] = [].

dom_ahdigital Over a year ago

I updated OP with the suggested code, but still getting type error.

Aplet123 Over a year ago

tempObj isn't being typed correctly due to first being initialized as {}. See Lazy Object Literal Initialization for fixes.

Nino Filiu · Accepted Answer · 2021-01-15 16:02:25Z

0

Also you might encounter an error with tempObj like

Property 'color' does not exist on type '{}'.

Building the whole object directly should fix it

export class MyComponent implements OnInit {
  itemsClicked: {color: string, shape: string}[] = [];
  ngOnInit(): any { }
  onItemClick(color: string, shape: string) {
    this.itemsClicked.push({ color, shape }); // <--
  }
}

answered Jan 15, 2021 at 16:02

Nino Filiu

18.9k11 gold badges64 silver badges97 bronze badges

Collectives™ on Stack Overflow

Add objects to an array in typescript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related