TypeScript Tip #2: valueof

While working on a TypeScript project, it is a common ask to restrict a type of variable to the value of the keys of an object.

Suppose we have an object like the below:

const statusMap = { pending : 'PENDING', finished : 'FINISHED', notStarted : 'NOT_STARTED'
};
Enter fullscreen mode
Exit fullscreen mode

When we want to have a related status variable, it can only have three values – PENDING, FINISHED and NOT_STARTED.

The way to go about it is usually by narrowing the type of our object first:

const statusMap = { pending : 'PENDING', finished : 'FINISHED', notStarted : 'NOT_STARTED'
} as const;
Enter fullscreen mode
Exit fullscreen mode

Using as const or const assertion,

  1. we make statusMap read-only, eg: statusMap.pending cannot be modified.
  2. no literal types are widened. eg: type PENDING does not become string

So given the above we usually end up creating a type like:

Image description

We use keyof and typeof provided by Typescript and Javascript respectively to help us make the suitable type.

This works well. But I would like to avoid writing the variable statusMap twice. Imagine us having multiple variables like that and our code starts looking like this:

Image description

It would be great if we could simplify it and reduce the duplication.
To do that it is easy to create a type like below:

type valueof<X> = X[keyof X];
Enter fullscreen mode
Exit fullscreen mode

We have created a generic called valueof. We extract the values of the keys of type X and use them to make a template literal type.

Now it works like the below and still works.

Image description

valueOf seems so convenient that I am surprised it is not available in TypeScript out-of-the-box. I hope you guys also find use of it.


Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment

Your email address will not be published. Required fields are marked *

Discover more from Coursity

Subscribe now to keep reading and get access to the full archive.

Continue reading

Scroll to Top
Clustered hosting platform get a host.