A more efficient method for defining and utilizing string enums in Typescript

Question

A more efficient method for defining and utilizing string enums in Typescript

 enum PAGES {
  HOME = 'HOME',
  CONTACT = 'CONTACT',
}

export const links: { [key: string]: string } = {
  [PAGES.HOME]: '/home',
  [PAGES.CONTACT]: '/contact',
};

export function getLink(page: string) {
  return BASE_URL + links[page];
}

Is there a more efficient way to define the enum constants without repeating the string values?

I noticed that my code has redundant strings in defining the enums.

Exploring the use of mapped types:

 type PAGE_KEY = 'HOME' | 'CONTACT';

export const urls: { [key: string]: string } = {
  HOME: '/home-page',
  CONTACT: '/contact-us/?version=v2',
};

export function getLink(page: PAGE_KEY) {
  return BASE_URL + urls[page];
}

typescript enums

Answer 1

Answer №1

To avoid repetition in this scenario, it is essential to derive your types from your values while utilizing type inference. Each JavaScript expression corresponds to a TypeScript type. As noted by Bergi, we can determine the type of a value using the typeof operator in a type context. By combining this with the keyof type operator, we can create a union type that includes all property keys within the urls object.

export const urls = {
  REQUEST_OTP: '/v1/auth/request-otp',
  LOGIN: '/v1/auth/login/?version=v2'
};

export type RouteKey = keyof typeof urls;

export function getUrl(route: RouteKey) {
  return BASE_URL + urls[route];
}

Playground Link

In the above example, we utilized the typeof operator to establish the type of the urls object as follows:

{
  REQUEST_OTP: string,
  LOGIN: string
}

We then used the keyof operator to generate a union type comprising the property keys of that type, which are:

'REQUEST_OTP' | 'LOGIN'

It's worth noting that the variable urls does not have an explicit type annotation. Leveraging type inference not only reduces verbosity but also yields a more robust type than { [key: string]: string }.

Alternatively, we could forego declaring the type alias RouteKey and simply define the function like this:

export function getUrl(route: keyof typeof urls) {
  return BASE_URL + urls[route];
}

Answer 2

To avoid repetition in this scenario, it is essential to derive your types from your values while utilizing type inference. Each JavaScript expression corresponds to a TypeScript type. As noted by Bergi, we can determine the type of a value using the typeof operator in a type context. By combining this with the keyof type operator, we can create a union type that includes all property keys within the urls object.

export const urls = {
  REQUEST_OTP: '/v1/auth/request-otp',
  LOGIN: '/v1/auth/login/?version=v2'
};

export type RouteKey = keyof typeof urls;

export function getUrl(route: RouteKey) {
  return BASE_URL + urls[route];
}

Playground Link

In the above example, we utilized the typeof operator to establish the type of the urls object as follows:

{
  REQUEST_OTP: string,
  LOGIN: string
}

We then used the keyof operator to generate a union type comprising the property keys of that type, which are:

'REQUEST_OTP' | 'LOGIN'

It's worth noting that the variable urls does not have an explicit type annotation. Leveraging type inference not only reduces verbosity but also yields a more robust type than { [key: string]: string }.

Alternatively, we could forego declaring the type alias RouteKey and simply define the function like this:

export function getUrl(route: keyof typeof urls) {
  return BASE_URL + urls[route];
}

Answer 3

Answer №2

It's important to provide specific details about what aspects of your current sample need improvement in order to determine if this alternative solution is better tailored to your needs. Here is a revised version of the code snippet:


type RouteKey = 'request-otp' | 'login';


export const urls: { [key: RouteKey]: string } = {
  'request-otp': '/v1/auth/otp',
  'login:': '/v1/auth/login',
};


export function getUrl(route: RouteKey) {
  return BASE_URL + urls[route];
}

Answer 4

It's important to provide specific details about what aspects of your current sample need improvement in order to determine if this alternative solution is better tailored to your needs. Here is a revised version of the code snippet:


type RouteKey = 'request-otp' | 'login';


export const urls: { [key: RouteKey]: string } = {
  'request-otp': '/v1/auth/otp',
  'login:': '/v1/auth/login',
};


export function getUrl(route: RouteKey) {
  return BASE_URL + urls[route];
}

A more efficient method for defining and utilizing string enums in Typescript

Answer №1

Answer №2

Similar questions

What is the best way to declare a global TypeScript variable in a definition file to make it accessible for import?

Access the most up-to-date information through the API URL

Struggling to incorporate method decorators to handle http errors in Angular?

Angular sets the required property only when the button is clicked

Application of Criteria for Zod Depending on Data Stored in Array Field

The makeStyles() function in Material-UI does not apply styles to CSS combinators and pseudo-classes

Dealing with circular dependencies in NestJS by using ForwardRef

What is the best way to prevent the hassle of manually reloading a VS Code extension each time I make updates

Asynchronous jQuery operations using promises and finally functionality

When using the ionic 3 storage.get function, it may return a null value when accessed outside

Mastering Typing for Enhanced Order Components using Recompose and TypeScript

The function onClick in Chart.js allows for passing the selected object in Typescript

Unable to proceed due to lint errors; after conducting research, the issue still remains

Transform the `PascalCase` format into `strictCamelCase` in TypeScript type conversion

Simplify typing in TypeScript using default generic parameters

Menu with options labeled using IDs in FluentUI/react-northstar

Exploring the contrast of && and ?? in JavaScript

Different ways to separate an axios call into a distinct method with vuex and typescript

Tips for sending data to CSS in Angular

Invoking a functionality within a stream of events through an observable's subscribe