Typescript interface design for nested objects in a hierarchical structure

Question

Typescript interface design for nested objects in a hierarchical structure

When data is received from the server in JSON format, it typically looks like the example below (details have been modified):

{
  "apple": {
    "fruitName": "apple",
    "types": {
      "greenApple": {
        "productCode": "P1",
        "productName": "Green Apple",
        "color": "green",
      },
      "galaApple": {
        "productCode": "P2",
        "productName": "Gala Apple",
        "color": "light red",
      },
      "redDelicious": {
        "productCode": "P3",
        "productName": "Red delicious apple",
        "color": "bright red",
      }
    }
  },
  "orange": {
    "fruitName": "orange",
    "types": {
      "mandarin": {
        "productCode": "P5",
        "productName": "Mandarin Oranges",
        "color": "orange",
      },
      "bloodOrange": {
        "productCode": "P6",
        "productName": "Blood Orange",
        "color": "red",
      }
    }
  },
}

I am currently designing an Interface structure using Typescript for a project.

My progress so far:

export type FruitTypes = {
  [key: string]: Product,
}

export type Product = {
  productCode: string
  productName: string
  color: string
}

export type Fruits = {
  fruitName: string
  type: object<FruitTypes>
}

The challenge I am facing is how to properly declare the 'type' property in the 'Fruits' interface. type: object<FruitTypes> does not work as expected since it needs to be an object containing objects. How can this be accurately represented in Typescript?

javascript typescript oop interface typescript-generics

Answer 1

Answer №1

My preferred approach is to utilize the Record<K,T>

export type Fruits = Record<string, FruitTypes>;

export type FruitTypes = {
  fruitName: string;
  types: Record<string, Product>;
}

export type Product = {
  productCode: string;
  productName: string;
  color: string;
}

Alternatively, you can explicitly define it like this:

export type Fruits = {
  [key:string]: FruitTypes;
}

export type FruitTypes = {
  fruitName: string;
  types: {
    [key:string]: Product;
  };
}

export type Product = {
  productCode: string;
  productName: string;
  color: string;
}

This sets Fruits as the overarching type for the structure.

Answer 2

My preferred approach is to utilize the Record<K,T>

export type Fruits = Record<string, FruitTypes>;

export type FruitTypes = {
  fruitName: string;
  types: Record<string, Product>;
}

export type Product = {
  productCode: string;
  productName: string;
  color: string;
}

Alternatively, you can explicitly define it like this:

export type Fruits = {
  [key:string]: FruitTypes;
}

export type FruitTypes = {
  fruitName: string;
  types: {
    [key:string]: Product;
  };
}

export type Product = {
  productCode: string;
  productName: string;
  color: string;
}

This sets Fruits as the overarching type for the structure.

Typescript interface design for nested objects in a hierarchical structure

Answer №1

Similar questions

Interactive Google Maps using Autocomplete Search Bar

Struggling with sending a post request in Node.js as the response always returns with an empty body

Dropzone is encountering an issue with uploading photos: The upload path seems to be invalid

Issue with jQuery .on('change') function not functioning correctly following a row being duplicated

Easily move a group of HTML elements at the same time with a simple

Watchable: Yield the outcome of a Promise as long as watching continues

Show a button using CSS when the cursor is hovering

Synchronization issue between CSS style and Javascript is causing discrepancies

Mongoose and MongoDB in Node.js fail to deliver results for Geospatial Box query

The value of a Highcharts series does not match that of a Data Source

Utilize Optional Chaining for verifying null or undefined values

Parcel JS: The function tree.render is missing or not defined

Implementing jQuery functionality on elements that are generated dynamically

Ways to determine the total amount of days in a given month

The v-data-table is unable to fetch the user list information from the API using Axios

Utilizing Vue.js for the selection of multiple elements

Blank area located at the bottom of the document

Adjust dimensions of an image retrieved from a URL

Images appear as plain text in the preview of VUE 3 (with TypeScript)

Errors encountered when using TypeScript with destructured variables and props not being recognized