TypeScript Tutorial: How to retrieve the data type of a deeply nested object

Question

TypeScript Tutorial: How to retrieve the data type of a deeply nested object

I have a question about extracting the type of a nested object with similar structures. The object in question contains multiple sub-objects that all follow the same pattern.

const VALUES = {
    currentStreak: {
      display: "Current streak",
      value: currentStreak,
    },
    longestStreak: {
      display: "Longest streak",
      value: longestStreak,
    },
    contributionsThisYear: {
      display: "Contributions this year",
      value: contributionsThisYear,
    },
    totalContributions: {
      display: "Total contributions",
      value: totalContributions,
    },
    currentCompany: {
      display: "Working at",
      value: currentCompany,
    },
}

The main keys of the object are working fine, but I'm looking to define types for the individual keys within each object as well.

export type Something = {
  [key in keyof typeof VALUES]: { [key: string]: string | number };
};

How can I properly define the types for each object so that they contain both display and value, where value can be either a string or a number?

Apologies if this is repetitive! I just want to get a clear understanding once and for all.

typescript types

Answer 1

Answer №1

If Something is meant to represent the type for VALUES, then there is an issue because you are referring to the object you want to type in its own type declaration.

Unless you have an Enum with string values to derive the keys from, it is recommended to type the keys simply as strings:

interface innerSomething {
  display: string
  value: number | string
}

type Something = {
  [key in string]: innerSomething
}

If using an Enum, the syntax should be similar to this:

enum SomethingKeys {
    currentStreak,
    longestStreak,
    contributionsThisYear,
    totalContributions,
    currentCompany
}

interface innerSomething {
  display: string
  value: number | string
}

type Something = {
  [key in keyof typeof SomethingKeys]: innerSomething;
}

Alternatively, instead of declaring an interface, you can define the type of the inner objects within the actual Something declaration like so:

enum SomethingKeys {
    currentStreak,
    longestStreak,
    contributionsThisYear,
    totalContributions,
    currentCompany
}

type Something = {
  [key in keyof typeof SomethingKeys]: { display: string, value: number | string };
}

However, utilizing an interface tends to be more readable and easier to maintain.

Answer 2

If Something is meant to represent the type for VALUES, then there is an issue because you are referring to the object you want to type in its own type declaration.

Unless you have an Enum with string values to derive the keys from, it is recommended to type the keys simply as strings:

interface innerSomething {
  display: string
  value: number | string
}

type Something = {
  [key in string]: innerSomething
}

If using an Enum, the syntax should be similar to this:

enum SomethingKeys {
    currentStreak,
    longestStreak,
    contributionsThisYear,
    totalContributions,
    currentCompany
}

interface innerSomething {
  display: string
  value: number | string
}

type Something = {
  [key in keyof typeof SomethingKeys]: innerSomething;
}

Alternatively, instead of declaring an interface, you can define the type of the inner objects within the actual Something declaration like so:

enum SomethingKeys {
    currentStreak,
    longestStreak,
    contributionsThisYear,
    totalContributions,
    currentCompany
}

type Something = {
  [key in keyof typeof SomethingKeys]: { display: string, value: number | string };
}

However, utilizing an interface tends to be more readable and easier to maintain.

Answer 3

Answer №2

Defining the following section is a key step

const ItemData = {
  title: string;
  price: number;
};

export const ItemList = {
  [key in keyof typeof PRODUCTS]: ItemData;
};

Answer 4

Defining the following section is a key step

const ItemData = {
  title: string;
  price: number;
};

export const ItemList = {
  [key in keyof typeof PRODUCTS]: ItemData;
};

Answer 5

Answer №3

console.log(typeof VALUES[keyof typeof VALUES]);

Answer 6

console.log(typeof VALUES[keyof typeof VALUES]);

TypeScript Tutorial: How to retrieve the data type of a deeply nested object

Answer №1

Answer №2

Answer №3

Similar questions

Can you share the appropriate tsconfig.json configuration for a service worker implementation?

How can I create interfaces for deeply nested objects in TypeScript?

Creating a functional component in React using TypeScript with an explicit function return type

Leveraging an external TypeScript library in a TypeScript internal module

How can a TypeScript function be used to retrieve a string (or JSON object)?

Navigating through unorganized items in Angular 9

Issue with importing MomentJS globally in TypeScript

Does the TS keyof typeof <Object> rule prohibit the assignment of object.keys(<Object>)?

Visual Studio is refusing to highlight my code properly, intellisense is failing to provide suggestions, and essential functions like go to definition are not functioning as expected

How come the information I receive when I subscribe always seems to mysteriously disappear afterwards?

Replace the default Material UI 5.0 typography theme with custom fonts on a global scale

What is causing the issue with using transition(myComponent) in this React 18 application?

Why does `react/require-default-props` still display an error even when a default prop value has been set?

Encountering difficulty when integrating external JavaScript libraries into Angular 5

Does anyone have experience using the useRef hook in React?

Angular8 does not recognize custom paths that have been added to the tsConfig file

Using TypeScript to create a generic type that wraps around HTMLElements

Creating autorest client based on various OpenAPI versions

I am encountering an issue where the nested loop in Angular TypeScript is failing to return

Efficiently managing repeated records in NodeJS using loops