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

cssclassName={ validatorState === RIGHT ? 'valid' : 'invalid' }

Next.js routes handlers do not have defined methods parameters

Securely transfer data between objects using a for loop

Encountering issues with importing a module from a .ts file

Retrieve a specific category within a method and then output the entire entity post adjustments

Understanding Typescript in Next.js components: Deciphering the purpose behind each segment

Running multiple instances of Chrome to execute all scenarios sequentially within a single feature file in Protractor

How do I add a new module to an existing one using Angular-CLI?

Navigating through Objects in Angular 9

Utilize an exported class as a type within a .d.ts file

Docz: Utilizing Typescript definitions for props rendering beyond just interfaces

Unlocking the potential: passing designated text values with Javascript

Convert JSON data to an array using Observable

Setting up popover functionality in TypeScript with Bootstrap 4

Best practice for incorporating types into a Redux-toolkit reducer

Centralized MUI design for varying screen dimensions

The issue of process.server being undefined in Nuxt.js modules is causing compatibility problems

TSX implementation of a paginator with an ellipse in the center

What is the reason behind the lag caused by setTimeout() in my application, while RxJS timer().subscribe(...) does not have the same

In TypeScript, there is a mismatch between the function return type