DEV Community 👩‍💻👨‍💻

Volodymyr Yepishev
Volodymyr Yepishev

Posted on

Typed Enum Flipping in Typescript

Ever had a situation where you needed to swap key-value pairs of an enum in typescript and attempts to type it resulted in ugly Record<string, string> sort of crutch?

Turns out key remapping that came with v4.1 make it a breeze :)

Suppose we have some rhymes

enum Rhymes {
  Money = 'bread and honey',
  Phone = 'dog and bone'
}
Enter fullscreen mode Exit fullscreen mode

Key remapping and template literals allow us to write a generic to swap they keys for values:

type FlippedRecord<T> = {
  [K in keyof T as `${string & T[K]}`]: K
};
Enter fullscreen mode Exit fullscreen mode

So now we can get some type safety while creating flipped enum maps:

const reversedEnum: FlippedRecord<typeof Rhymes> = {
  'bread and honey': 'Money',
  'dog and bone': 'Phone'
}
Enter fullscreen mode Exit fullscreen mode

It's boombastic, check it out in playground :)

Top comments (0)

12 Gorgeous UI Components for Your Design Inspiration

12 Gorgeous UI components for your design inspiration: cards, text, buttons, checkboxes, icons, loaders and menus.