TypeScript: How to Get Names of Enum Entries

Introduction

TypeScript enums are a powerful feature to express a collection of related values. This tutorial will show you various ways to retrieve the names of enum entries in TypeScript.

Basic Enum Usage

In TypeScript, enums are used to define named constants, which can help make your code more readable and maintainable. Here’s a basic example of how to define an enum:

enum Direction {
  North,
  East,
  South,
  West
}

By default, enums will be numbered starting from 0, but you can manually set the values of enum members. To obtain the name of a specific enum entry, you can access it like so:

let directionName: string = Direction[Direction.North];
console.log(directionName); // 'North'

Getting All Enum Names

To get the names of all enum entries, you can use the Object.keys() method by first converting the enum to an object:

let enumNames: string[] = Object.keys(Direction);
console.log(enumNames); // ['0', '1', '2', '3', 'North', 'East', 'South', 'West']

This will give you both the names and the numeric keys. To filter out the numeric keys and get only the names, you can add a filter:

enumNames = enumNames.filter(key => isNaN(Number(key)));
console.log(enumNames); // ['North', 'East', 'South', 'West']

Advanced Techniques

For a more advanced and safer way of getting enum names, you might want to write a generic function that handles any enum:

function getEnumNames(e: any): string[] {
  return Object.keys(e).filter(key => isNaN(Number(e[key])));
}

let directionNames: string[] = getEnumNames(Direction);
console.log(directionNames); // ['North', 'East', 'South', 'West']

If you use string enums, the approach changes slightly as their keys are the values themselves:

enum Color {
  Red = 'RED',
  Green = 'GREEN',
  Blue = 'BLUE'
}

let colorNames: string[] = getEnumNames(Color);
console.log(colorNames); // ['RED', 'GREEN', 'BLUE']

Handling Enums with Mixed Values

Sometimes, enums can have mixed string and numeric values. Here’s how to handle such enums:

enum MixedEnum {
  Yes = 1,
  No = 0,
  Maybe = 'MAYBE',
}

let mixedEnumNames: string[] = getEnumNames(MixedEnum);
console.log(mixedEnumNames); // ['Yes', 'No', 'Maybe']

Note that when accessing enum members with mixed types, you should ensure the logic in getEnumNames accommodates that variety.

Reflection with Enums

TypeScript enables reflection with enums using the Reflect API. Reflection with enums can be powerful, particularly when working with metadata:

let reflectedNames = Reflect.ownKeys(Direction).filter(key => typeof Direction[key as any] === 'number');
console.log(reflectedNames); // ['North', 'East', 'South', 'West']

Conclusion

In conclusion, TypeScript enums offer a structured way to manage collections of related values. We’ve explored several methods to retrieve an enum’s member names, from basic to more complex situations, including enums with mixed value types. Adopting one of these methods will depend on your particular use case and the structure of your enum.