Tips on declaring an object with a nested array of objects in TypeScript

Question

Tips on declaring an object with a nested array of objects in TypeScript

In my code, I have defined two classes. One is called Stuff and the other is called Thing.

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

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

As I was working on my application, I attempted to declare a field using the following syntax.

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

Initially, this method worked perfectly fine. However, when I tried to assign an array of things instead of null, I encountered an error stating that it's not assignable to the specified type.

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

javascript typescript

Answer 1

Answer №1

One way to instantiate your objects is by using the new keyword:

class Items {
    constructor(public title: string, public info: Info[] = []) { }
}

class Info {
    constructor(public active: boolean) {

    };
}

var dataList: Items[] = [
    new Items("example A", [new Info(true), new Info(false)]),
    new Items("example B", null)
];

Alternatively, you can utilize interfaces:

interface IInfo {
    active: boolean
}

interface IItems {
    title: string;
    info: IInfo[]
}

var dataList: IItems[] = [
    { title: "example A", info: [{ active: true }, { active: false }] },
    { title: "example B", info: null }];

It is crucial to decide whether classes or interfaces are more suitable for your needs, as some functionalities may not be compatible with anonymous objects:

/*
class Items {
constructor(public title: string, public info: Info[] = []) { }
}
class Info {
constructor(public active: boolean) {

};
}
var dataList: Items[] = [
{ title: "example A", info: [{ active: true }, { active: false }] },
new Items("example B", null)
];
console.log("Is dataList[0] Items:", dataList[0] instanceof Items);
console.log("Is dataList[1] Items:", dataList[1] instanceof Items);

*/
var Items = (function () {
    function Items(title, info) {
        if (info === void 0) { info = []; }
        this.title = title;
        this.info = info;
    }
    return Items;
}());
var Info = (function () {
    function Info(active) {
        this.active = active;
    }
    ;
    return Info;
}());
var dataList = [
    { title: "example A", info: [{ active: true }, { active: false }] },
    new Items("example B", null)
];
console.log("Is dataList[0] Items:", dataList[0] instanceof Items);
console.log("Is dataList[1] Items:", dataList[1] instanceof Items);

Answer 2

One way to instantiate your objects is by using the new keyword:

class Items {
    constructor(public title: string, public info: Info[] = []) { }
}

class Info {
    constructor(public active: boolean) {

    };
}

var dataList: Items[] = [
    new Items("example A", [new Info(true), new Info(false)]),
    new Items("example B", null)
];

Alternatively, you can utilize interfaces:

interface IInfo {
    active: boolean
}

interface IItems {
    title: string;
    info: IInfo[]
}

var dataList: IItems[] = [
    { title: "example A", info: [{ active: true }, { active: false }] },
    { title: "example B", info: null }];

It is crucial to decide whether classes or interfaces are more suitable for your needs, as some functionalities may not be compatible with anonymous objects:

/*
class Items {
constructor(public title: string, public info: Info[] = []) { }
}
class Info {
constructor(public active: boolean) {

};
}
var dataList: Items[] = [
{ title: "example A", info: [{ active: true }, { active: false }] },
new Items("example B", null)
];
console.log("Is dataList[0] Items:", dataList[0] instanceof Items);
console.log("Is dataList[1] Items:", dataList[1] instanceof Items);

*/
var Items = (function () {
    function Items(title, info) {
        if (info === void 0) { info = []; }
        this.title = title;
        this.info = info;
    }
    return Items;
}());
var Info = (function () {
    function Info(active) {
        this.active = active;
    }
    ;
    return Info;
}());
var dataList = [
    { title: "example A", info: [{ active: true }, { active: false }] },
    new Items("example B", null)
];
console.log("Is dataList[0] Items:", dataList[0] instanceof Items);
console.log("Is dataList[1] Items:", dataList[1] instanceof Items);

Answer 3

Answer №2

Consider utilizing <> or the as keyword for casting:

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

Alternatively, you can also use

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

Answer 4

Consider utilizing <> or the as keyword for casting:

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

Alternatively, you can also use

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

Answer 5

Answer №3

Building upon the correct response provided earlier, if you wish to utilize interfaces, you have the option to define nested interfaces within interfaces as demonstrated below:

interface IDevice {
  brand: string
  model: string
}

interface ISmartHome {
  location: string
  devices: IDevice[]
}

interface IHouse {
  smartHomes: ISmartHome[]
}

If you prefer not to assign names to nested parts' types, you can arrange the interface declarations in a nested manner like this:

interface IHouse {
  rooms: {
    name: string
    devices: {
      brand: string
      model: string
    }[]
  }[]
}

Both of these approaches to defining the IHouse interface will provide strict typing for a house structure example, such as the one shown below:

let house: IHouse = {
  rooms: [
    {
      name: "living room",
      devices: [
        { 
          brand: "Samsung",
          model: "TV123"
        },
        { 
          brand: "Apple",
          model: "iPhoneX"
        }
      ]
    },
    {
      name: "bedroom",
      devices: []
    }
  ]
}

Answer 6

Building upon the correct response provided earlier, if you wish to utilize interfaces, you have the option to define nested interfaces within interfaces as demonstrated below:

interface IDevice {
  brand: string
  model: string
}

interface ISmartHome {
  location: string
  devices: IDevice[]
}

interface IHouse {
  smartHomes: ISmartHome[]
}

If you prefer not to assign names to nested parts' types, you can arrange the interface declarations in a nested manner like this:

interface IHouse {
  rooms: {
    name: string
    devices: {
      brand: string
      model: string
    }[]
  }[]
}

Both of these approaches to defining the IHouse interface will provide strict typing for a house structure example, such as the one shown below:

let house: IHouse = {
  rooms: [
    {
      name: "living room",
      devices: [
        { 
          brand: "Samsung",
          model: "TV123"
        },
        { 
          brand: "Apple",
          model: "iPhoneX"
        }
      ]
    },
    {
      name: "bedroom",
      devices: []
    }
  ]
}

Tips on declaring an object with a nested array of objects in TypeScript

Answer №1

Answer №2

Answer №3

Similar questions

What are the best ways to transfer information between functional components in a React application?

What factors does mongo consider when serializing an object?

Acquire JSON data structures using Node.js

Steps for displaying or hiding the mobile menu when clicked

Using form.submit() alongside preventDefault() will not yield the desired outcome

Looking for a way to extract Regular Expressions from an IgGrid cell in Infragistics?

Struggling to spot my error (codewars, javascript, level 8)

Original selection unavailable in pagination

Retrieve all elements from an array that have the highest frequency of occurrence

Transmit information from a comprehensive form using AJAX technology

Preventing distortion of the object when using camera.lookat() in three.js

What causes the canLoad function to create an endless loop when rerouting?

Extend jQuery deeply, only replacing values and not adding new keys

What is the best way to use the Object3D.lookAt() function to align an ExtrudeGeometry face with an object?

Is Angular 6 with typescript the golden recipe for layout design?

Incorporate additional query parameters into a dynamic route with React Router to enhance functionality

gist-react: containing gist within a scrollable div

Troubleshooting React Native's ScrollView issue with row direction and flexWrap not allowing scrolling

Effortlessly submit form data in Codeigniter without the need for page refreshing using jQuery ajax