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

Tips for building and implementing Angular URL Parameters for URLs in the form: "component/#/?id=..."

Properly passing props to child components in React with TypeScript. Resolve Error ts(2322)

Using *ngFor to dynamically update the DOM when an array is modified via ngrx

How can one define a getter within an interface?

What is the best way to avoid passing a value to a component in nextjs?

Should we utilize the component @Input as a parameter for the injected service constructor, or should we opt for the ServiceFactory

Exploring the power of Vue.js reactivity using Object.defineProperty in a TypeScript environment

Exporting key/value objects with React components as values in Typescript

Encountered an issue while attempting to load the TSLint library for the document within Visual Studio Code

Encountered Angular SSR Serve Error: NullInjectorError - StaticInjectorError in AppServerModule with the following reference:

Issues encountered when trying to upload images to Firestore Storage

Component re-rendering and initializing useReducer

After calling the service, Angular 2 is unable to perform any actions within the subscribe method

The error message "SyntaxError: Cannot use import statement outside a module" popped up while working with discord.js, typescript, heroku

Encountering the error "Object potentially undefined" while attempting to activate Cloud Function during document creation

The Express middleware type cannot be assigned as expected

Can you explain the process of utilizing Angular databinding to display nested information?

OpenTok Angular 6 encountered an error with code TS2314 stating that the generic type 'Promise<T>' needs to have 1 type argument specified

Is Intellisense within HTML not available in SvelteKit when using TypeScript?

Guide to crafting a personalized parameter decorator for extracting the user from a request