Adding an interface for an object containing multiple objects requires defining the structure and behavior

Question

Adding an interface for an object containing multiple objects requires defining the structure and behavior

I'm in the process of designing an interface for my object. Here is the data structure of the object:

{
 "isLoaded": true,
 "items": {
         "0": {
            "name": "Mark",
            "age": "40"
        },
        "1": {
            "name": "Alex",
            "age": "41"
        },
        "2": {
            "name": "Foo",
            "age": "42"
        },
    }
}

This is what the interface I have created looks like:

interface Items {
 "name": string;
 "age": string;
}

interface ItemData {
 "isLoaded": boolean;
 "items" : Items;
}

Would you say this is the correct method to create an interface for the above data structure?

typescript

Answer 1

Answer №1

interface ProductInfo {
  "isProductAvailable": boolean;
  "products" : {
     [key: string]: Product
   }
}

source https://www.typescriptlang.org/docs/handbook/interfaces.html#indexable-types

Answer 2

interface ProductInfo {
  "isProductAvailable": boolean;
  "products" : {
     [key: string]: Product
   }
}

source https://www.typescriptlang.org/docs/handbook/interfaces.html#indexable-types

Answer 3

Answer №2

interface Product {
   title: string;
   price: number;
}

  interface ProductData {
     isAvailable: boolean;
     productsList: {
       [key: string]: Product
     }
  }

Or a cleaner version would be:

interface ProductData {
  isAvailable: boolean;
  productsList: Record<string, Product>
}

Your initial interpretation was:

interface ProductData {
 "isAvailable": boolean;
 "products" : Items;
}

However, this implies that products is a singular object of type Items, when it should actually be a collection of Product objects identified by string keys.

[key: string]: Product represents an indexable type and Record<string, Product> is a generic which essentially encapsulates the same concept underneath.

Answer 4

interface Product {
   title: string;
   price: number;
}

  interface ProductData {
     isAvailable: boolean;
     productsList: {
       [key: string]: Product
     }
  }

Or a cleaner version would be:

interface ProductData {
  isAvailable: boolean;
  productsList: Record<string, Product>
}

Your initial interpretation was:

interface ProductData {
 "isAvailable": boolean;
 "products" : Items;
}

However, this implies that products is a singular object of type Items, when it should actually be a collection of Product objects identified by string keys.

[key: string]: Product represents an indexable type and Record<string, Product> is a generic which essentially encapsulates the same concept underneath.

Adding an interface for an object containing multiple objects requires defining the structure and behavior

Answer №1

Answer №2

Similar questions

There has been no answer provided. Could this be due to being utilized in an asynchronous function that was not returned as a promise?

Encountering a TypeError while working with Next.js 14 and MongoDB: The error "res.status is not a function"

I seem to be missing some properties in the request body schema. Why am I receiving an incomplete model for

Encountering an error while using TypeScript, Mocha, and Express: "TypeError: app.address is not a

"Step-by-Step Guide: Displaying a New Component When a Table Row is

Using parameters and data type in Typescript

prolonging inner interface created by supabase

Effortlessly converting JSON data into TypeScript objects with the help of React-Query and Axios

Error Encountered during Compilation of React TypesIs this okay

Guide to incorporating Bootstrap icons into an Angular application through programming techniques

Deactivating PrimeNG checkbox

Retrieve a variable in a child component by passing it down from the parent component and triggering it from the parent

The type 'ClassA<{ id: number; name: string; }>' cannot be assigned to the type 'ClassA<Record<string, any>>'

Module 'rxjs/internal/Observable' not found

Adding to an existing array in SQLite by updating a column using Sequelize

Guide on how to prevent click events when a checkbox is not selected in Angular 2

Is there a way to utilize an Event Emitter to invoke a function that produces a result, and pause until the answer is provided before continuing?

Checking if the Cursor is Currently Positioned on a Chart Element in Word Addin/OfficeJS

A Promise signature allows for the compilation of function bodies that return undefined

Unlocking the Power of Data Passing Through Tabs