TypeScript: get the type of a nested object

Question

I know that this question may have been answered elsewhere but in case it wasn't, can someone help me get the type of a nested object? We're talking about an object that has multiple other object but all of them look pretty much the same.

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,
    },
}

This would be the object and this is what I've got. It works well for the main keys but I want to have the keys of each object typed as well.

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

How do I get the second part right? So that each object has display and value with value being a number or a string.

Sorry if this is a repeat! I'm hoping to understand this once and for all.

sebasaenz · Accepted Answer · 2022-04-17 19:18:07Z

If Something is supposed to be a type for VALUES, then you have a problem because you are referencing the object you want to type in its own type declaration.

Unless you have some sort of Enum with string values to extract the keys from, you should be typing the keys as just strings:

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

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

With an Enum it should be something like this:

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

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

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

You could also not declare the interface and declare the type of the inner objects in the actual Something declaration like:

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

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

Although using an interface is more readable and maintainable.

Andrei Stoica · Accepted Answer · 2022-04-17 18:49:34Z

1

You can explicitly define the second part

type DataPoint = {
  display: string;
  value: number;
};

export type Something = {
  [key in keyof typeof VALUES]: DataPoint;
};

answered Apr 17, 2022 at 18:49

Andrei Stoica

4372 silver badges6 bronze badges

2 Comments

dragi Over a year ago

Is there a way to do that dynamically?

Andrei Stoica Over a year ago

@dragi as a best practice you should have your variables definition be dictated by your types. If you want to get the exact type of a variable, you can just type Something = typeof VALUES (this will match all of the keys and value as they are)

user15954220 · Accepted Answer · 2024-01-03 16:30:06Z

-1

typeof VALUES[keyof typeof VALUES]

answered Jan 3, 2024 at 16:30

user15954220

1

1 Comment

Sanxofon Over a year ago

Your answer is not clear

Collectives™ on Stack Overflow

TypeScript: get the type of a nested object

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related