Convert TypeScript Enum To String

While working with TypeScript enums, I was required to convert the enum to a string because the support ticket had a status field stored as an enum in TypeScript, but I needed to show a readable string for the UI display.

There are various methods to do this. In this tutorial, I will explain how to convert TypeScript Enum to String with detailed examples.

Table of Contents

What Are Enums in TypeScript?

Before diving into conversion methods, let’s understand what TypeScript enums actually are.

Enums in TypeScript allow developers to define a set of named constants, making code more readable and maintainable. They come in two primary flavors: numeric enums (the default) and string enums.

Here is the example.

// Define the enum
enum Status {
    New = "NEW",
    InProgress = "IN_PROGRESS",
    Done = "DONE"
  }
  
  // Use the enum
  let currentStatus = Status.InProgress;  
  console.log("Current Status:", currentStatus); // Output: IN_PROGRESS

Here you can see the output of the above Enum TypeScript code.

Convert TypeScript Enum to String

Now, let’s explore different methods to convert these enum values to strings in TypeScript.

Method 1: Using String Interpolation

String interpolation is the simplest approach to converting an enum value to its string representation. Here is the TypeScript code.

enum PaymentStatus {
  Pending,
  Completed,
  Failed,
  Refunded
}

// Convert enum value to string
const statusValue = PaymentStatus.Completed;
const statusString = PaymentStatus[statusValue]; // "Completed"

console.log(statusString); // Outputs: "Completed"

This method works well for numeric enums because TypeScript automatically creates reverse mappings. However, it doesn’t work the same way for string enums.

Here is the exact output in the screenshot below:

Method 2: Object.keys() for String Enums

For string enums, we need a different approach:

enum ProductCategory {
  Electronics = "ELECTRONICS",
  Clothing = "CLOTHING",
  Books = "BOOKS"
}

function enumToString<T>(enumValue: T): string {
  return enumValue as unknown as string;
}

const category = ProductCategory.Electronics;
const categoryString = enumToString(category);

console.log(categoryString); // Outputs: "ELECTRONICS"

In this case, since the enum values are already strings, we just need to cast the enum value to a string.

Here is the exact output in the screenshot below:

How to Convert TypeScript Enum to String

Method 3: Create a Generic Utility Function

If you work with multiple enums, it’s helpful to create a reusable utility function that can handle conversion for any enum type.

Here is an example.

function getEnumKeyByValue<T extends {[index: string]: string | number}>(enumType: T, value: string | number): string | undefined {
  const keys = Object.keys(enumType).filter(
    key => typeof enumType[key] === "number" || enumType[key] === value
  );
  return keys.length > 0 ? keys[0] : undefined;
}

// Usage example with numeric enum
enum OrderStatus {
  Processing,
  Shipped,
  Delivered,
  Cancelled
}

const statusKey = getEnumKeyByValue(OrderStatus, OrderStatus.Shipped);
console.log(statusKey); // Outputs: "Shipped"

This generic utility function works for both numeric and string enums, providing a consistent way to get the string key for any enum value.

Method 4: Convert Enum to String Array

Sometimes, you might want to convert your entire enum to an array of strings, especially for dropdown menus or form options:

enum USState {
  California = "CA",
  NewYork = "NY",
  Texas = "TX",
  Florida = "FL"
}

// Convert enum to string array
function enumToStringArray<T extends object>(enumObj: T): string[] {
  return Object.keys(enumObj)
    .filter(key => isNaN(Number(key)))
    .map(key => key.toString());
}

const stateNames = enumToStringArray(USState);
console.log(stateNames); // Outputs: ["California", "NewYork", "Texas", "Florida"]

This technique is particularly useful when converting a TypeScript enum to a JavaScript array for use in UI components.

You can see the exact output in the screenshot below:

Method 5: Convert String Enums to Strings in TypeScript

String enums are even simpler to work with because their values are already strings.

Consider an application that displays the names of states:

enum State {
    California = "California",
    Texas = "Texas",
    NewYork = "New York",
    Florida = "Florida"
}

function getStateString(state: State): string {
    return state;
}

console.log(getStateString(State.California)); // Output: "California"
console.log(getStateString(State.Texas)); // Output: "Texas"

Here, the enum values are directly used as strings.

Conclusion

I hope you have got an idea of how to convert TypeScript enums to strings. I have explained with examples and various methods to convert enums to strings in TypeScript.