Formulate a Generic Type using an Enum

Question

Formulate a Generic Type using an Enum

I'm currently working on a project that involves creating a generic Type using enums.

Enum

export enum OverviewSections {
  ALL = 'all',
  SCORE = 'score_breakdown',
  PERFORMANCE = 'performance_over_time',
  ENGAGEMENT = 'engagement',
  COMPANY = 'company_views_graph',
  PEOPLE = 'people_views_graph',
  ARTICLES = 'articles_read_graph',
  PLATFORM = 'platform_sessions_graph',
  EMAILS = 'emails_opened_graph',
}

My goal is to develop a generic type that allows me to structure my data in the following way:

Overview: {
    [OverviewSections.ALL]: {
      data: IOverview | null,
      loading: boolean,
      error: boolean
    },
    [OverviewSections.SCORE]: {
      data: IScore | null,
      loading: boolean,
      error: boolean
    },
    [OverviewSections.PERFORMANCE]: {
      data: IPerformace | null,
      loading: boolean,
      error: boolean
    },
    ......
},

If anyone has any insights or suggestions on how I can accomplish this, I would greatly appreciate it. Thank you!

javascript typescript typescript-typings typescript-generics

Answer 1

Answer №1

Here's a useful tip to enhance safety in your code:


// Switching from ENUM to IMMUTABLE object for increased security

const OverviewSections = {
  ALL: 'all',
  SCORE: 'score_breakdown',
  PERFORMANCE: 'performance_over_time',
} as const

// Introducing a type for boilerplate code
type DataStatus<T> = {
  data: T | null
  loading: boolean,
  error: boolean
}

// Mock interfaces to test
interface IOverview {
  tag: 'IOverview'
}
interface IScore {
  tag: 'IScore'
}
interface IPerformance {
  tag: 'IPerformance'
}

// Mapping the types for clarity
type Mapped = {
  [OverviewSections.ALL]: IOverview;
  [OverviewSections.PERFORMANCE]: IPerformance;
  [OverviewSections.SCORE]: IScore
}

// Defining a type that captures all values of OverviewSections
type Values<T> = {
  [P in keyof T]: T[P]
}[keyof T]

/**
 * Main type implementation:
 * 1) Maps through all values of OverviewSections
 * 2) Checks if value matches key in Mapped
 * 3) Creates DataStatus with relevant generic if match is found
 * 4) Returns NEVER if no match is found
 */
type MakeType<E extends Record<string, string>, M> = {
  [P in Values<E>]: P extends keyof M ? DataStatus<M[P]> : never
}

type Result = MakeType<typeof OverviewSections, Mapped>

Remember, you always have the option to revert back to using an enum if needed.

Answer 2

Here's a useful tip to enhance safety in your code:


// Switching from ENUM to IMMUTABLE object for increased security

const OverviewSections = {
  ALL: 'all',
  SCORE: 'score_breakdown',
  PERFORMANCE: 'performance_over_time',
} as const

// Introducing a type for boilerplate code
type DataStatus<T> = {
  data: T | null
  loading: boolean,
  error: boolean
}

// Mock interfaces to test
interface IOverview {
  tag: 'IOverview'
}
interface IScore {
  tag: 'IScore'
}
interface IPerformance {
  tag: 'IPerformance'
}

// Mapping the types for clarity
type Mapped = {
  [OverviewSections.ALL]: IOverview;
  [OverviewSections.PERFORMANCE]: IPerformance;
  [OverviewSections.SCORE]: IScore
}

// Defining a type that captures all values of OverviewSections
type Values<T> = {
  [P in keyof T]: T[P]
}[keyof T]

/**
 * Main type implementation:
 * 1) Maps through all values of OverviewSections
 * 2) Checks if value matches key in Mapped
 * 3) Creates DataStatus with relevant generic if match is found
 * 4) Returns NEVER if no match is found
 */
type MakeType<E extends Record<string, string>, M> = {
  [P in Values<E>]: P extends keyof M ? DataStatus<M[P]> : never
}

type Result = MakeType<typeof OverviewSections, Mapped>

Remember, you always have the option to revert back to using an enum if needed.

Formulate a Generic Type using an Enum

Answer №1

Similar questions

How can two unique links toggle the visibility of divs with two specific IDs?

What methods are available for altering state in Server Actions in NextJS 13?

developing a custom modal using a button in a React project with Material UI

Efficiently run multiple Node-written apps on a single server

Commencing a New Ember.js Venture

Experience the power of React TypeScript where functions are passed as props, but access is restricted

Updating the regex pattern for the date format to dd-M-yy in jQuery Validation Engine

Button click causing TextField to print incorrectly

Leveraging web workers for asynchronous API calls

Code that achieves the same functionality but does not rely on the

Managing cookies with ReactJs: A guide to setting, storing, and updating cookies without deleting the existing ones

Tips for managing lag caused by large raw image re-renders in a React application

Exploring Virtual Reality with the Oculus Quest2 and Three.js

Swapping one div for another, all the while incorporating a limited number of buttons within the webpage

Unable to input text using Python Selenium in a textbox

Should I avoid declaring global app variables in Angular?

The caption below the image is not functioning correctly when hovering over it

How can I resolve the issue of the input field added dynamically by JavaScript not appearing in the PHP $_POST variable?

How can I retrieve a text file using an API in a Next.js application?

Is Javascript Functioning Properly?