DEV Community

Cover image for Typescript Enums
Shagun Mistry
Shagun Mistry

Posted on

2

Typescript Enums

Enums, short for enumerations, are a powerful feature in TypeScript that allow you to define a set of named constants. This can be incredibly useful when you want to represent a limited set of choices or options within your code.

Enums can make your code more readable, maintainable, and less prone to errors.

Imagine you're building a simple online store. You need to represent the different payment methods your customers can choose from:

// Without enums
const PAYMENT_METHOD_CARD = "card";
const PAYMENT_METHOD_PAYPAL = "paypal";
const PAYMENT_METHOD_APPLEPAY = "applepay";

// ... later in your code ...
if (paymentMethod === PAYMENT_METHOD_CARD) {
  // Process card payment
} else if (paymentMethod === PAYMENT_METHOD_PAYPAL) {
  // Process Paypal payment
}
Enter fullscreen mode Exit fullscreen mode

This approach works, but it's a bit verbose and prone to typos.

This is where Enums come handy!

// Using enums
enum PaymentMethod {
  Card = "card",
  Paypal = "paypal",
  ApplePay = "applepay",
}

// ... later in your code ...
if (paymentMethod === PaymentMethod.Card) {
  // Process card payment
} else if (paymentMethod === PaymentMethod.Paypal) {
  // Process Paypal payment
}
Enter fullscreen mode Exit fullscreen mode

Here's why enums are so awesome:

  • Readability: Instead of using magic strings, you have clearly defined names like PaymentMethod.Card which make your code much easier to understand.
  • Type Safety: TypeScript will flag any errors if you try to use an invalid payment method, preventing runtime issues.
  • Maintainability: If you need to add a new payment method, you only need to add it to the enum definition, ensuring consistency across your codebase.

Let's put it into action with a practical code example:

enum PaymentMethod {
  Card = "card",
  Paypal = "paypal",
  ApplePay = "applepay",
}

function processPayment(paymentMethod: PaymentMethod) {
  if (paymentMethod === PaymentMethod.Card) {
    console.log("Processing card payment...");
  } else if (paymentMethod === PaymentMethod.Paypal) {
    console.log("Processing Paypal payment...");
  } else if (paymentMethod === PaymentMethod.ApplePay) {
    console.log("Processing ApplePay payment...");
  }
}

processPayment(PaymentMethod.Paypal); // Output: Processing Paypal payment...
Enter fullscreen mode Exit fullscreen mode

Isn't that neat?

Enums bring structure and clarity to your code, making it easier to manage and less error-prone.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (1)

Collapse
 
lexlohr profile image
Alex Lohr

Only recently I started a discussion about the shortcomings of enums in TS. Maybe that helps adding a bit of perspective.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay