Enum vs union literal type trade-offs in Typescript - Hands-On Comparison

Enum vs Union Literal Type Trade-offs in TypeScript

📖 Scenario: Imagine you are building a simple app that tracks the status of orders in a store. You want to represent the order status using TypeScript types. You will explore two ways to do this: using enum and using union literal types. This will help you understand the differences and trade-offs between these two approaches.

🎯 Goal: You will create two ways to represent order statuses: one with an enum and one with a union literal type. Then you will write a function that accepts only valid statuses and prints a message. Finally, you will see how the output looks for both approaches.

📋 What You'll Learn

Create an enum called OrderStatusEnum with values Pending, Shipped, and Delivered

Create a union literal type called OrderStatusUnion with the string literals 'Pending', 'Shipped', and 'Delivered'

Write a function printStatusEnum that takes a parameter status of type OrderStatusEnum and prints a message

Write a function printStatusUnion that takes a parameter status of type OrderStatusUnion and prints a message

Call both functions with the Shipped status and print the results

💡 Why This Matters

🌍 Real World

Enums and union literal types are common ways to represent fixed sets of values in TypeScript, such as status codes, user roles, or options in forms.

💼 Career

Understanding these types helps you write safer and clearer code in TypeScript, which is widely used in web development and many software projects.

1

Create the OrderStatusEnum enum

Create an enum called OrderStatusEnum with these exact members: Pending, Shipped, and Delivered.

Typescript

# Your code here

Need a hint?

Use the enum keyword followed by the name OrderStatusEnum. List the members inside curly braces.

2

Create the OrderStatusUnion union literal type

Create a type alias called OrderStatusUnion that is a union of the string literals 'Pending', 'Shipped', and 'Delivered'.

Typescript

enum OrderStatusEnum {
    Pending,
    Shipped,
    Delivered
}

# Your code here

Need a hint?

Use the type keyword followed by the name OrderStatusUnion and assign it to the union of string literals separated by |.

3

Write functions to print status messages

Write a function called printStatusEnum that takes a parameter status of type OrderStatusEnum and prints "Enum status: " followed by the status name. Also write a function called printStatusUnion that takes a parameter status of type OrderStatusUnion and prints "Union status: " followed by the status string.

Typescript

enum OrderStatusEnum {
    Pending,
    Shipped,
    Delivered
}

type OrderStatusUnion = 'Pending' | 'Shipped' | 'Delivered';

# Your code here

Need a hint?

Use console.log with template strings to print the messages. For the enum, use OrderStatusEnum[status] to get the name.

4

Call the functions with the Shipped status and print output

Call printStatusEnum with OrderStatusEnum.Shipped and call printStatusUnion with the string 'Shipped'. These calls should print the status messages.

Typescript

enum OrderStatusEnum {
    Pending,
    Shipped,
    Delivered
}

type OrderStatusUnion = 'Pending' | 'Shipped' | 'Delivered';

function printStatusEnum(status: OrderStatusEnum): void {
    console.log(`Enum status: ${OrderStatusEnum[status]}`);
}

function printStatusUnion(status: OrderStatusUnion): void {
    console.log(`Union status: ${status}`);
}

# Your code here

Need a hint?

Call the functions exactly as shown to print the status messages.