Interface for dynamic objects in Typescript

Question

Interface for dynamic objects in Typescript

I am currently using JavaScript to create an object and would like to include an interface for the data:

JavaScript:

const childGroups: Children = {};
      childGroups.children = [];

// Adding some data 
childGroups.children.push(children);

Interface:

export interface Child {
    ClusterPoint
}

export interface Children {
    children: {
        [key: number]: Child
    }
}

I am encountering the following errors:

The property 'children' is missing in type '{}' but required in type 'Children'. The property 'push' does not exist on type {[key: number]: Child}

The data appears as follows:

https://i.sstatic.net/B90FX.png

Any assistance would be greatly appreciated.

Update

Credit goes to Nikita Madeev, as I was able to make it work with this solution:

export interface Child {
    children: {
        ClusterPoint
    };
}

export interface Children {
    children: Child[];
}

javascript typescript

Answer 1

Answer №1

export interface Offspring {
    GroupingPoint;
}

export interface Descendants {
    descendants: Offspring[];
}

const offspringGroups: Descendants = { descendants: [] };

// Adding new data
offspringGroups.descendants.push(nextGeneration);

Descendants.descendants - it's an object, not an array, so it doesn't have a push method
Make sure to define all required properties during initialization

Answer 2

export interface Offspring {
    GroupingPoint;
}

export interface Descendants {
    descendants: Offspring[];
}

const offspringGroups: Descendants = { descendants: [] };

// Adding new data
offspringGroups.descendants.push(nextGeneration);

Descendants.descendants - it's an object, not an array, so it doesn't have a push method
Make sure to define all required properties during initialization

Answer 3

Answer №2

If you are aiming to create a similar setup

const groupChildren: Kids = {};
      groupChildren.kids = [];

the corresponding interfaces would be

export interface Kids {
    kids?: Child[];
}

and for achieving this arrangement

const groupChildren: Kids = {};
      groupChildren.kids = {[some_id]: some_kidValue};

you would need the following interface

export interface Kids {
    kids?: {
      [key: number]: Child
     };
}

Answer 4

If you are aiming to create a similar setup

const groupChildren: Kids = {};
      groupChildren.kids = [];

the corresponding interfaces would be

export interface Kids {
    kids?: Child[];
}

and for achieving this arrangement

const groupChildren: Kids = {};
      groupChildren.kids = {[some_id]: some_kidValue};

you would need the following interface

export interface Kids {
    kids?: {
      [key: number]: Child
     };
}

Interface for dynamic objects in Typescript

Answer №1

Answer №2

Similar questions

Construct a new array within a JavaScript constructor function

Execute controller action upon item selection within KODataTable MVC table

Issue with Bootstrap Table Style When Using window.print();

Populate a dropdown with values from a JSON object

Python_scraping <li style="display: hidden;">

Standardize API data for utilization in Redux

Assigning an identification number to specify the type of Chip

cannot wait for promise in loop to avoid delaying the request

Submitting information to the server utilizing a POST request through jQuery

Guide on transforming the best.pt model of YOLOv8s into JavaScript

Ways to retrieve the state from the Redux store

The compression feature in express.js middleware is not functioning correctly

"The combination of Node.js, Express, and Angular is causing a continuous loop in the controller when a route is

Tips for utilizing .env variables within npm scripts

How to use Laravel to show a graph sourced from a separate database connection

Hide the menu when tapping outside on a tablet device

Guidelines for combining inner objects with their parent in Javascript

Tips on implementing npm's node-uuid package with TypeScript

A guide to simultaneously sending dual variables by implementing Ajax via JavaScript

Transferring information between two resolvers within the same route in Angular