How to declare an object with nested array of objects in TypeScript?

Question

I have two classes like so.

class Stuff {
  constructor() { }
  things: Thing[] = [];
  name: string;
}

class Thing {
  constructor() { }
  active: boolean;
}

I tried to declare a field in my application like this.

blopp: Stuff[] = [
  {name: "aa", things: null}, 
  {name: "bb", things: null}];

The above approach works just fine. However, when I try to provide an array of things, instead of null, I get the error that it's not assignable the the type specified.

blopp: Stuff[] = [
  {name: "aa", things: [{active: true}, {active: false}]}, 
  {name: "bb", things: null}];

@deceze Not sure what to tell you. I got an error message. However, following the suggestion from the accepted answer made the trick. Perhaps mine IDE is more naggy (or yours not naggy enough). Not proficient with TS enough to pass judgment. — Konrad Viltersten
– Konrad Viltersten, Commented Mar 6, 2017 at 13:46

Emil S. Jørgensen · Accepted Answer · 2017-03-06 09:16:53Z

11

You should be using the new keyword to instantiate your objects:

class Stuff {
    constructor(public name: string, public things: Thing[] = []) { }
}

class Thing {
    constructor(public active: boolean) {

    };
}

var blopp: Stuff[] = [
    new Stuff("aa", [new Thing(true), new Thing(false)]),
    new Stuff("bb", null)
];

Or simply use interfaces:

interface IThing {
    active: boolean
}

interface IStuff {
    name: string;
    things: IThing[]
}

var blopp: IStuff[] = [
    { name: "aa", things: [{ active: true }, { active: false }] },
    { name: "bb", things: null }];

It is important to determine if you need classes or interface as some things will not work with anonymous objects:

/*
class Stuff {
	constructor(public name: string, public things: Thing[] = []) { }
}
class Thing {
	constructor(public active: boolean) {

	};
}
var blopp: Stuff[] = [
	{ name: "aa", things: [{ active: true }, { active: false }] },
	new Stuff("bb", null)
];
console.log("Is blopp[0] Stuff:", blopp[0] instanceof Stuff);
console.log("Is blopp[1] Stuff:", blopp[1] instanceof Stuff);

*/
var Stuff = (function () {
    function Stuff(name, things) {
        if (things === void 0) { things = []; }
        this.name = name;
        this.things = things;
    }
    return Stuff;
}());
var Thing = (function () {
    function Thing(active) {
        this.active = active;
    }
    ;
    return Thing;
}());
var blopp = [
    { name: "aa", things: [{ active: true }, { active: false }] },
    new Stuff("bb", null)
];
console.log("Is blopp[0] Stuff:", blopp[0] instanceof Stuff);
console.log("Is blopp[1] Stuff:", blopp[1] instanceof Stuff);

edited Mar 6, 2017 at 9:16

answered Mar 6, 2017 at 9:10

Emil S. Jørgensen

6,3891 gold badge17 silver badges30 bronze badges

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

4 Comments

Konrad Viltersten Over a year ago

It feels super weird to talk interface in JavaScript. I'm still getting used to the concept of class. (I've been doing OO in C# for over 15 years but in JS it seems to exotic...) Would you say that classes are more appropriate or widely used in a general case? I can't judge...

Emil S. Jørgensen Over a year ago

Typescript works best with classes, as that is its intended use. Interfaces are good if you need to couple some JavaScript to your Typescript.

ksh Over a year ago

Is it fine if array of thing (things: Thing[]) created insdie stuff constructor by just looping??

Emil S. Jørgensen Over a year ago

@ksh It should be yes. It's a little difficult to answer without seeing a code example. You could submit a question if you like?

Vladu Ionut · Accepted Answer · 2017-03-06 09:15:44Z

3

try to use <> or the as keyword for casting:

blopp: Stuff[] = [
  {name: "aa", things: [{active: true} as Thing , {active: false}as Thing]}, 
  {name: "bb", things: null}];
}

or

blopp: Stuff[] = [
  {name: "aa", things: [<Thing>{active: true}  , <Thing>{active: false}]}, 
  {name: "bb", things: null}];
}

answered Mar 6, 2017 at 9:15

Vladu Ionut

8,2231 gold badge23 silver badges30 bronze badges

1 Comment

Konrad Viltersten Over a year ago

How would you say that your suggestion compares to the constructor based as proposed by Emil above in the other reply? I need more feed-back to take an informed decision. :)

Ade · Accepted Answer · 2022-09-13 18:47:21Z

Further to the accepted answer which is of course correct, if you do want to use interfaces you can define interfaces to go within interfaces like this:

interface IFurniture {
  name: string
  legs: number
}

interface IRoom {
  name: string
  furniture: IFurniture[]
}

interface IHouse {
  rooms: IRoom[]
}

And if you don't don't need the nested parts’ types to be named you can nest the interface definitions:

interface IHouse {
  rooms: {
    name: string
    furniture: {
      name: string
      legs: number
    }[]
  }[]
}

Either of these ways of defining the IHouse interface will strictly type a house definition like below:

let house: IHouse = {
  rooms: [
    {
      name: "kitchen",
      furniture: [
        { 
          name: "chair",
          legs: 4
        },
        { 
          name: "stool",
          legs: 3
        }
      ]
    },
    {
      name: "bedroom",
      furniture: []
    }
  ]
}

Collectives™ on Stack Overflow

How to declare an object with nested array of objects in TypeScript?

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related