Is there a way to establish a data type using a specific key within the Record<K, T> structure in Typescript?

Question

Is there a way to establish a data type using a specific key within the Record<K, T> structure in Typescript?

Imagine the scenario where an object type needs to be created and linked to a specific key specified in Record<Keys, Type>.

Let's say there is a type called User, which can have one of three values - user, admin, or moderator. A new type called Stats needs to be defined with distinct properties for each of these values.

Unfortunately, using a union type does not produce the desired outcome:

type UserStats = {
  timeOnline: string;
};
type AdminStats = {
  timeAdmining: string;
};
type ModeratorStats = {
  timeModerating: string;
};
type User = 'USER' | 'ADMIN' | 'MODERATOR';

type Stats = Record<User, UserStats | AdminStats | ModeratorStats>;

What would be the approach to achieve this goal?

typescript typescript-generics

Answer 1

Answer №1

To prevent redundancy, it is recommended to derive User from Stats instead:

type UserProfile = {
  activities: string;
};
type AdminProfile = {
  tasksPerformed: string;
};
type ModeratorProfile = {
  communityEngagement: string;
};

type User = keyof Stats;

type Stats = {
    USER: UserProfile;
    ADMIN: AdminProfile;
    MODERATOR: ModeratorProfile;
};

Answer 2

To prevent redundancy, it is recommended to derive User from Stats instead:

type UserProfile = {
  activities: string;
};
type AdminProfile = {
  tasksPerformed: string;
};
type ModeratorProfile = {
  communityEngagement: string;
};

type User = keyof Stats;

type Stats = {
    USER: UserProfile;
    ADMIN: AdminProfile;
    MODERATOR: ModeratorProfile;
};

Answer 3

Answer №2

Make the following modifications:

Replace :

type Stats = Record<User, UserStats | AdminStats | ModeratorStats>;

With :

const Stats : Record<User, UserStats | AdminStats | ModeratorStats>={
      USER:{timeOnline:"User"},
      ADMIN:{timeAdmining:"Admin"},
      MODERATOR:{timeModerating:"Moderator"}
    };
    
    console.log(Stats.ADMIN);

Answer 4

Make the following modifications:

Replace :

type Stats = Record<User, UserStats | AdminStats | ModeratorStats>;

With :

const Stats : Record<User, UserStats | AdminStats | ModeratorStats>={
      USER:{timeOnline:"User"},
      ADMIN:{timeAdmining:"Admin"},
      MODERATOR:{timeModerating:"Moderator"}
    };
    
    console.log(Stats.ADMIN);

Is there a way to establish a data type using a specific key within the Record<K, T> structure in Typescript?

Answer №1

Answer №2

Similar questions

Tips for showing the upcoming week in an angular application

Form appears outside the modal window

Is it better to set Angular2 @Inputs as public, or should we opt for a stricter API by keeping them private?

Fixing Typescript assignment error: "Error parsing module"

Resolving callback definition issue: Can be assigned to constraint, yet may be instantiated with a distinct subtype. ( TS 2345 )

Make sure to call the loader function in React Router only when there are path params present

Compelled to utilize unfamiliar types in TypeScript generics

Issue with building Webpack React Router DOM configuration

What is the best way to mock imports in NestJS testing?

Conditional types can be used as type guards

What is the best way to determine the appropriate generic type for this situation?

Using NodeJS API gateway to transfer image files to S3 storage

Why is the Last Page display on pagination showing as 3 instead of 2 per items?

What is the best way to add a clickable link/button in Angular 8 that opens a webpage in a new tab?

Utilizing the namespace importation method correctly

Building a TTL based schema in NestJs with MongooseIn this guide, we will explore

When attempting to select dates from the picker options, the array is found to be devoid of any entries

Why does the "revalidate" field in Incremental Static Regeneration keep refreshing without considering the specified delay?

Unable to resolve external modules in TypeScript when using node.js

Edit the CSS styles within a webview