Stop 07 · TypeScriptTopics · 3/12

Enums

Part of the Frontend Developer Roadmap

In short

Order status can be 'pending', 'shipped' or 'delivered', and nothing else. Enums give such fixed choices names, so a typo like 'shiped' gets caught.

A way to define a set of named constants (like `Status.Active`, `Status.Inactive`) that TypeScript treats as a distinct, checkable type.

The jaadu mascot points at a red, yellow and green traffic light, with a purple lamp crossed out.

Think of it like this

Traffic light colours

A traffic light has only red, yellow and green. There's no 'purple'. An enum is a list like that: a fixed set of allowed values with clear names, so your code can't invent new ones by mistake.

Watch it happen

String enum or union type?

enum OrderStatus

  • Becomes a real JavaScript object
  • Use OrderStatus.Shipped, not raw strings
  • Some type-stripping tools can't handle it

"pending" | "shipped"

  • Disappears completely after compiling
  • Plain strings like "shipped" are checked
  • Works with every TypeScript tool

Both catch typos like "shiped". A union of string literals is lighter and many teams prefer it. Use a string enum if your team likes named constants.

The big ideas

What you need to know

Named constants

enum Status { Pending, Shipped } groups related values under one name.

Prefer string enums

Give each member a string value. Logs then show "SHIPPED" instead of a confusing 1.

Enums create real code

Unlike most types, an enum becomes a JavaScript object at runtime. Some tools that just strip types can't handle them.

A union is often enough

type Status = "pending" | "shipped" gives the same safety with zero runtime code. Many teams prefer this.

See it in code

Walk through the code

ts
1enum OrderStatus {2  Pending = "PENDING",3  Shipped = "SHIPPED",4  Delivered = "DELIVERED",5}6 7function label(status: OrderStatus) {8  if (status === OrderStatus.Shipped) return "On the way";9  return status;10}11 12label(OrderStatus.Shipped);  // OK13label("SHIPPED");            // Error with a string enum14 15// The lighter option many teams use instead:16type Status = "pending" | "shipped" | "delivered";

1/4A string enum: three named members, each with a readable string value.

With a string enum you must write OrderStatus.Shipped, not the raw string. With a union type, plain strings like "shipped" are checked directly.

Save yourself the pain

Common mistakes

Oops

Using number enums and seeing 0, 1, 2 in your API data and logs.

Do this instead

Give members string values so data stays readable everywhere.

Oops

Reaching for an enum for every small set of options.

Do this instead

A union of string literals is simpler and has no runtime cost. Use enums when your team prefers them.

Your mission

Enum vs union

~15 min

Quick check

What's the main difference between a string enum and a union like "a" | "b"?

Go deeper

  1. 1Replace a set of string constants in a project with a proper enum.
  2. 2Compare numeric enums vs string enums.
  3. 3Learn why many teams prefer union string literal types over enums for simpler cases.

More topics at this stop

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download
InsideEdge