How to de-structure an enum values in typescript?

Question

I have an enum in typescript like below:

export enum XMPPElementName {
  state = "state",
  presence = "presence",
  iq = "iq",
  unreadCount = "uc",
  otherUserUnreadCount = "ouc",
  sequenceID = "si",
  lastSequenceID = "lsi",
  timeStamp = "t",
  body = "body",
  message = "message"
}

And wants to de-structure its value, How can we do this in Typescript?

const { uc, ouc, msg, lsi, si, t, body } =  XMPPElementName; 

update

As @amadan mentioned, we can use Assigning to new variable names as in Mozilla doc say Destructuring_assignment, like below:

Assigning to new variable names

A property can be unpacked from an object and assigned to a variable with a different name than the object property.

const o = {p: 42, q: true};
const {p: foo, q: bar} = o;
 
console.log(foo); // 42 
console.log(bar); // true

And the method is very good to solve this problem, but if you need to access all items without the need to explicitly define them, you can either on of these two mentiond tag1 tag2

Answer 1

const { uc, ouc, msg, lsi, si, t, body } =  XMPPElementName; 

This doesn't work because XMPPElementName doesn't have an element named uc (and equivalently for others). If you explicitly name your keys, it will work:

  const {
    unreadCount: uc,
    otherUserUnreadCount: ouc,
    message: msg,
    lastSequenceID: lsi,
    sequenceID: si,
    timeStamp: t,
    body: body,
  } = XMPPElementName;

it will work. Alternately, you can just use variables with names that are equal to the keys, not the values:

  const {
    unreadCount,
    otherUserUnreadCount,
    message,
    lastSequenceID,
    sequenceID,
    timeStamp,
    body,
  } = XMPPElementName;

Answer 2

This may be helpful for anyone looking for a quick and easy answer - yes you can (at least as of now). This works for enums with and without assigned values as far as I can tell.

enum MyEnum {
  One,
  Two,
  Three
}

const { One, Two, Three } = myEnum;

console.log({ One, Two, Three }) // {One: 0, Two: 1, Three: 2}

enum Status {
   None = '',
   Created = 'CREATED',
   Completed = 'COMPLETED',
   Failed = 'FAILED',
}

const { None, Created, Completed, Failed } = Status;

console.log(None, Created, Completed, Failed) // '', 'CREATED', 'COMPLETED, 'FAILED'

Please write me back if I'm wrong or you found any weirdness when testing yourself.

Answer 3

As we know, in typescript an enum is like a plain old javascript object(at-least what the playground js-output is showing or the log showing):

one way is using a function which generates a new object with {value:value} structure like below:

export function convertEnumValuesToObject<T>(enumObj: T): { [index: string]: T[keyof T] } {
  const enum_values = Object.values(enumObj);
  return Object.assign({}, ...enum_values.map(_ => ({ [_]: _ })));
}

  const { uc, ouc, msg, lsi, si, t, body } = convertEnumValuesToObject(
      XMPPElementName
    ); 

It would be great to see answers in typescript?

Answer 4

You want an enum value-to-value map. Like you've said enum in JS is just a POJO. You can create a utility type to help generate the correct type.

type EnumValueMap<T extends { [k: string]: string }> = { [K in T[keyof T]]: K }

function convertEnumValuesToObject<T extends { [k: string]: string }>(enumerable: T): EnumValueMap<T> {
  return (Object as any).fromEntries(Object.values(enumerable).map(v => [v, v]))
}

Playground Link