Better way to declare string enums and use them - Typescript

Question

 enum ROUTES {
  REQUEST_OTP = 'REQUEST_OTP',
  LOGIN = 'LOGIN',
}

export const urls: { [key: string]: string } = {
  [ROUTES.REQUEST_OTP]: '/v1/auth/otp',
  [ROUTES.LOGIN]: '/v1/auth/login',
};

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

Is there a better way to write ROUTES enum rather than repeatedly writing string literals next to it?

There seems to be a repetition of code in the my code writing the string enums.

Trying out mapped types:

 type ROUTE_KEY = 'REQUEST_OTP' | 'LOGIN';

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

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

I usually use a config.ts file to store such urls, and load these to the ENV. So, the default values will be in the config and it can be overridden by setting the env var too. — Dathan
– Dathan, Commented Aug 8, 2020 at 8:28
Or even better, type ROUTE_KEY = keyof typeof urls; (with urls being declared as const) — Bergi
– Bergi, Commented Aug 8, 2020 at 14:47

Aluan Haddad · Accepted Answer · 2020-08-09 15:50:53Z

1

The key to avoiding redundancy in this situation is to compute your types from your values while leveraging type inference. Every JavaScript expression has a corresponding TypeSript type. As Bergi metioned, we can obtain the type from a value by using the typeof operator in type position. Together with the keyof type operator we use this to compute a union type consisiting of all property keys in urls.

export const urls = {
  EQUEST_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, we used typeof type operator to obtain the type of the value urls, which is

{
  REQUEST_OTP: string,
  LOGIN: string
}

We then used the keyof type operator to compute a union type consisting of the property keys of the that type, which is

'REQUEST_OTP' | 'LOGIN'

Notice how the variable urls has no type annotation. The use of type inference not only increases brevity but also results in a far stronger type than { [key: string]: string }.

Alternately, we can actually could do without declaring the type alias RouteKey and just write

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

edited Aug 9, 2020 at 15:50

answered Aug 8, 2020 at 23:22

Aluan Haddad

32.1k10 gold badges83 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IntFooBar Over a year ago

I want to point out that we should be appending the urls with URL here is the MDN docs; instead of using string concatenation, like new URL(urls[route], BASE_URL). If the person passes in an invalid URL, it will throw a TypeError object error.

Evert · Accepted Answer · 2020-08-08 14:43:36Z

0

It's not clear if this is better, because you're not specific about what is bad with your current sample. However, this is how I would write this:


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];
}

edited Aug 8, 2020 at 14:43

answered Aug 8, 2020 at 8:24

Evert

101k18 gold badges136 silver badges221 bronze badges

1 Comment

Aluan Haddad Over a year ago

This results in an error. Index signatures cannot be a union type. The correct type would be { [P in RouteKey]: string }

Collectives™ on Stack Overflow

Better way to declare string enums and use them - Typescript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related