How to Convert TypeScript Enum to Number [5 Methods]

In my years of working with TypeScript, I’ve often needed to convert enum values to their numeric representations. This is a common requirement when interfacing with APIs, storing values in databases, or performing calculations.

TypeScript enums provide a way to define a set of named constants, but sometimes you need to work with their underlying numeric values directly.

In this article, I’ll walk you through several practical methods to convert TypeScript enums to numbers, complete with real-world examples.

What are TypeScript Enums?

TypeScript enums allow us to define a set of named constants. By default, enums are number-based, with each value automatically assigned an incremental numeric value starting from 0.

Let’s begin with a basic example of a TypeScript enum that represents different US tax filing statuses:

enum FilingStatus {
  Single,
  MarriedJointly,
  MarriedSeparately,
  HeadOfHousehold
}

In this enum, Single is 0, MarriedJointly is 1, MarriedSeparately is 2, and HeadOfHousehold is 3.

Now let me show you different methods to convert an enum to a number in TypeScript.

Method 1: Direct Assignment

The simplest way to convert an enum value to a number in TypeScript is through direct assignment. Since TypeScript enums are treated as numbers by default, you can directly assign an enum value to a number variable.

enum FilingStatus {
  Single,
  MarriedJointly,
  MarriedSeparately,
  HeadOfHousehold
}

// Convert enum to number
const status: FilingStatus = FilingStatus.MarriedJointly;
const numericStatus: number = status; // numericStatus = 1

console.log(numericStatus); // Output: 1

This approach works because TypeScript automatically compiles enums to JavaScript numbers.

You can see the output in the screenshot below:

typescript convert enum to number

Check out TypeScript Enum Duplicate Values

Method 2: Using the Unary Plus Operator

Another concise way to convert an enum value to a number is by using the unary plus operator (+) in TypeScript. This is especially useful when you want to ensure the value is treated as a number in all contexts.

enum USState {
  California = 1,
  Texas = 2,
  NewYork = 3,
  Florida = 4
}

const state = USState.NewYork;
const stateNumber = +state; // Convert to number using unary plus

console.log(stateNumber); // Output: 3

The unary plus operator is a convenient shorthand that explicitly converts the value to a number.

Here is the exact output in the screenshot below:

convert enum to number typescript

Check out How to Get Enum by Name in TypeScript

Method 3: Using the Number() Function

For more explicit conversion, you can use the Number() function. This approach makes your intent clear to other developers reading your code.

Here is the complete code.

enum PaymentMethod {
  CreditCard = 100,
  BankTransfer = 200,
  PayPal = 300,
  Venmo = 400
}

const method = PaymentMethod.PayPal;
const methodNumber = Number(method);

console.log(methodNumber); // Output: 300

This method is particularly useful when working with string enums that might need conversion.

Here is the output in the screenshot below:

How to Convert TypeScript Enum to Number

Read Convert Enums to Strings in TypeScript

Method 4: Using String Enums with Numeric Values

When working with string enums, you can use associated numeric values and extract them when needed. This approach provides both the readability of string enums and the utility of numeric values.

enum TaxBracket {
  Low = "10%",
  Medium = "22%",
  High = "35%",
  VeryHigh = "37%"
}

// An object mapping string enum values to numbers
const taxRates: Record<TaxBracket, number> = {
  [TaxBracket.Low]: 10,
  [TaxBracket.Medium]: 22,
  [TaxBracket.High]: 35,
  [TaxBracket.VeryHigh]: 37
};

// Get numeric value for a tax bracket
const bracket = TaxBracket.Medium;
const numericRate = taxRates[bracket];

console.log(numericRate); // Output: 22

This method is particularly useful when the string representation has meaningful business value, but you still need the numeric equivalent.

Check out TypeScript Switch with Enums

Method 5: Using Const Enums for Performance

If performance is a concern, TypeScript offers const enums, which are completely removed during compilation, replacing enum references with their actual values.

const enum USTimeZone {
  Eastern = -5,
  Central = -6,
  Mountain = -7,
  Pacific = -8,
  Alaska = -9,
  Hawaii = -10
}

// The compiled JavaScript will directly use the number -8
const pacificOffsetHours: number = USTimeZone.Pacific;

console.log(pacificOffsetHours); // Output: -8

This method provides compile-time benefits and zero runtime overhead, making it ideal for performance-critical applications.

Check out Check If a Value Is in an Enum in TypeScript

Working with Reverse Mappings

TypeScript provides reverse mappings for numeric enums, allowing you to get the enum member name from its numeric value. This can be useful when converting back and forth between enum values and numbers.

enum USRegion {
  Northeast,
  Southeast,
  Midwest,
  Southwest,
  West
}

const regionNumber = USRegion.Midwest; // 2
const regionName = USRegion[regionNumber]; // "Midwest"

console.log(regionNumber); // Output: 2
console.log(regionName); // Output: "Midwest"

However, it’s important to note that string enums don’t have reverse mappings, so this approach only works with numeric enums.

Using Enums with Type Guards

When receiving values from external sources like APIs, you might need to validate if a number actually corresponds to a valid enum value. Here’s how to do that:

enum HttpStatus {
  OK = 200,
  Created = 201,
  BadRequest = 400,
  Unauthorized = 401,
  NotFound = 404,
  ServerError = 500
}

function isValidHttpStatus(status: number): status is HttpStatus {
  return Object.values(HttpStatus).includes(status);
}

function handleResponse(statusCode: number) {
  if (isValidHttpStatus(statusCode)) {
    // statusCode is now treated as HttpStatus
    switch (statusCode) {
      case HttpStatus.OK:
        return "Success";
      case HttpStatus.NotFound:
        return "Resource not found";
      // Handle other cases
    }
  } else {
    return "Unknown status code";
  }
}

console.log(handleResponse(200)); // "Success"
console.log(handleResponse(999)); // "Unknown status code"

This approach combines enum conversion with type safety, ensuring you only work with valid enum values.

Check out Convert TypeScript Enums to Arrays

Practical Example: Converting User Roles for an API

Let’s look at a practical example where we need to convert user role enums to numbers when sending data to an API:

enum UserRole {
  Viewer = 1,
  Editor = 2,
  Admin = 3,
  SuperAdmin = 4
}

interface User {
  id: string;
  name: string;
  role: UserRole;
}

// A function that sends user data to an API
function updateUserInDatabase(user: User) {
  // Convert the enum to a number for the API
  const userData = {
    id: user.id,
    name: user.name,
    roleId: Number(user.role) // Explicitly convert to number
  };

  // Simulate API call
  console.log("Sending to API:", userData);
  // actual API call would go here
}

const johnDoe: User = {
  id: "user123",
  name: "John Doe",
  role: UserRole.Editor
};

updateUserInDatabase(johnDoe);
// Output: Sending to API: { id: 'user123', name: 'John Doe', roleId: 2 }

In this example, we convert the UserRole enum to a number before sending it to our hypothetical API, ensuring compatibility with the backend system.

Check out Convert String to Enum in TypeScript

When to Use Each Method

  1. Direct Assignment: Use when you want a simple, concise conversion.
  2. Unary Plus Operator: Great for quick, inline conversions.
  3. Number() Function: Best for explicit conversions that make code intent clear.
  4. String Enums with Numeric Values: Useful when you need both string representations and numeric values.
  5. Const Enums: Ideal for performance-critical applications.

I hope you found this tutorial helpful for converting TypeScript enums to numbers. Please let me know if the above examples are helpful to you.

You may also like:

Power Apps functions free pdf

30 Power Apps Functions

This free guide walks you through the 30 most-used Power Apps functions with real business examples, exact syntax, and results you can see.

Download User registration canvas app

DOWNLOAD USER REGISTRATION POWER APPS CANVAS APP

Download a fully functional Power Apps Canvas App (with Power Automate): User Registration App