Retrieve all enum values using TypeScript

Question

When dealing with a TypeScript enum like the one shown below:

export enum Color {
    Red,
    Green,
    Blue,
}

I am trying to extract all its values into an array as follows:

["Red", "Green", "Blue"]

However, when I attempt to do so using the code:

const colors = Object.keys(Color);

The resulting array is not what I expected, it includes both index and value entries:

[ '0', '1', '2', 'Red', 'Green', 'Blue' ]

Can someone explain why this is happening and provide a solution to only retrieve the values?

Answer 1

Answer №1

To remove the numeric keys, you can utilize either Object.values or Object.keys:

const colors = Object.keys(Color).filter((item) => {
    return isNaN(Number(item));
});
console.log(colors.join("\n"));

This code will display:

Red
Green
Blue

When a TypeScript enum is transpiled, it becomes a regular JavaScript object:

{ 
  '0': 'Red', 
  '1': 'Green',
  '2': 'Blue',
  Red: 0,
  Green: 1,
  Blue: 2
}

This means you can use the numerical index as the key to retrieve the value and vice versa:

console.log(Color[0]); // "Red"
console.log(Color["0"]); // "Red"
console.log(Color["Red"]) // 0

Answer 2

To remove the numeric keys, you can utilize either Object.values or Object.keys:

const colors = Object.keys(Color).filter((item) => {
    return isNaN(Number(item));
});
console.log(colors.join("\n"));

This code will display:

Red
Green
Blue

When a TypeScript enum is transpiled, it becomes a regular JavaScript object:

{ 
  '0': 'Red', 
  '1': 'Green',
  '2': 'Blue',
  Red: 0,
  Green: 1,
  Blue: 2
}

This means you can use the numerical index as the key to retrieve the value and vice versa:

console.log(Color[0]); // "Red"
console.log(Color["0"]); // "Red"
console.log(Color["Red"]) // 0