String enums in Typescript - Mini Project: Build & Apply

Using String Enums in TypeScript

📖 Scenario: You are building a simple app that tracks the status of orders in an online store. Each order can have a status like 'Pending', 'Shipped', or 'Delivered'. To keep your code clear and avoid mistakes, you want to use string enums to represent these statuses.

🎯 Goal: Create a TypeScript program that defines a string enum for order statuses, uses a variable to hold a status, and prints a message based on that status.

📋 What You'll Learn

Define a string enum called OrderStatus with values Pending, Shipped, and Delivered.

Create a variable called currentStatus and assign it the OrderStatus.Pending value.

Write a function called getStatusMessage that takes a parameter status of type OrderStatus and returns a string message.

Use a switch statement inside getStatusMessage to return different messages for each status.

Print the message returned by getStatusMessage(currentStatus).

💡 Why This Matters

🌍 Real World

String enums help represent fixed sets of string values clearly, such as order statuses, user roles, or categories in apps.

💼 Career

Understanding enums is important for writing clean, maintainable TypeScript code in many software development jobs.

1

Define the string enum OrderStatus

Create a string enum called OrderStatus with these exact members and values: Pending = 'Pending', Shipped = 'Shipped', and Delivered = 'Delivered'.

Typescript

# Your code here

Hint

Use the enum keyword and assign string values to each member.

2

Create the variable currentStatus

Create a variable called currentStatus and assign it the value OrderStatus.Pending.

Typescript

enum OrderStatus {
    Pending = 'Pending',
    Shipped = 'Shipped',
    Delivered = 'Delivered'
}

# Your code here

Hint

Use let currentStatus: OrderStatus = OrderStatus.Pending; to declare the variable.

3

Write the function getStatusMessage

Write a function called getStatusMessage that takes a parameter status of type OrderStatus. Use a switch statement on status to return these exact messages: for OrderStatus.Pending return 'Your order is pending.', for OrderStatus.Shipped return 'Your order has been shipped.', and for OrderStatus.Delivered return 'Your order was delivered.'.

Typescript

enum OrderStatus {
    Pending = 'Pending',
    Shipped = 'Shipped',
    Delivered = 'Delivered'
}

let currentStatus: OrderStatus = OrderStatus.Pending;

// Write function getStatusMessage below
# Your code here

Hint

Use a switch statement to check the status and return the correct message.

4

Print the status message

Write a console.log statement to print the message returned by calling getStatusMessage(currentStatus).

Typescript

enum OrderStatus {
    Pending = 'Pending',
    Shipped = 'Shipped',
    Delivered = 'Delivered'
}

let currentStatus: OrderStatus = OrderStatus.Pending;

function getStatusMessage(status: OrderStatus): string {
    switch (status) {
        case OrderStatus.Pending:
            return 'Your order is pending.';
        case OrderStatus.Shipped:
            return 'Your order has been shipped.';
        case OrderStatus.Delivered:
            return 'Your order was delivered.';
    }
}

// Print the message below
# Your code here

Hint

Use console.log(getStatusMessage(currentStatus)); to print the message.

Practice

1. What is a key benefit of using string enums in TypeScript?

easy

A. They group related string constants under named values for clarity.

B. They automatically assign numeric values to members.

C. They allow mixing numbers and strings without errors.

D. They eliminate the need to declare enum members explicitly.

Solution

1. Step 1: Understand string enums purpose

   String enums group related string values under named constants to improve code clarity and safety.

2. Step 2: Compare options

   Only They group related string constants under named values for clarity. correctly describes this benefit. Numeric auto-assignment and mixing types are not features of string enums.

3. Final Answer:

   They group related string constants under named values for clarity. -> Option A

4. Quick Check:

   String enums improve clarity = A [OK]

Hint: String enums give names to strings for clearer code [OK]

Common Mistakes:

• Confusing string enums with numeric enums
• Thinking enum members can be implicit strings
• Assuming enums mix string and number types

2. Which of the following is the correct syntax to declare a string enum in TypeScript?

easy

A. const enum Colors { Red = RED, Green = GREEN, Blue = BLUE }

B. enum Colors { Red, Green, Blue }

C. enum Colors { Red = 'RED', Green = 'GREEN', Blue = 'BLUE' }

D. enum Colors = { Red: 'RED', Green: 'GREEN', Blue: 'BLUE' }

Solution

1. Step 1: Review string enum syntax

   String enums require explicit string values assigned to each member using = 'value' inside an enum block.

2. Step 2: Check each option

   enum Colors { Red = 'RED', Green = 'GREEN', Blue = 'BLUE' } correctly uses enum Colors { Red = 'RED', ... }. enum Colors { Red, Green, Blue } lacks string assignments. enum Colors = { Red: 'RED', Green: 'GREEN', Blue: 'BLUE' } uses invalid syntax with = outside enum. const enum Colors { Red = RED, Green = GREEN, Blue = BLUE } misses quotes around string values.

3. Final Answer:

   enum Colors { Red = 'RED', Green = 'GREEN', Blue = 'BLUE' } -> Option C

4. Quick Check:

   String enum syntax = D [OK]

Hint: String enums need explicit string values with quotes [OK]

Common Mistakes:

• Omitting string values for enum members
• Using object literal syntax instead of enum
• Missing quotes around string values

3. What will be the output of this TypeScript code?

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT"
}

console.log(Direction.Left);

medium

A. 3

B. "LEFT"

C. Left

D. undefined

Solution

1. Step 1: Understand enum member values

   Each member in the string enum has an explicit string value, e.g., Left = "LEFT".

2. Step 2: Check console.log output

   Logging Direction.Left prints the string value assigned, which is "LEFT".

3. Final Answer:

   "LEFT" -> Option B

4. Quick Check:

   Enum member value = "LEFT" [OK]

Hint: Enum member prints assigned string value, not name or index [OK]

Common Mistakes:

• Expecting member name instead of value
• Confusing string enums with numeric enums
• Assuming enum members print numeric indexes

4. Identify the error in this string enum declaration:

enum Status {
  Active = ACTIVE,
  Inactive = "INACTIVE"
}

medium

A. Enum name Status is invalid

B. Enum members cannot have different string values

C. Enum must use numeric values only

D. Missing quotes around ACTIVE in Active member

Solution

1. Step 1: Check string enum member values

   String enum members must have explicit string values in quotes, e.g., "ACTIVE".

2. Step 2: Identify error in Active member

   The Active member uses ACTIVE without quotes, causing a reference error.

3. Final Answer:

   Missing quotes around ACTIVE in Active member -> Option D

4. Quick Check:

   String values need quotes = A [OK]

Hint: Always put string enum values inside quotes [OK]

Common Mistakes:

• Forgetting quotes around string values
• Mixing string and numeric enum members
• Assuming enum names have restrictions

5. Given this string enum:

enum Role {
  Admin = "ADMIN",
  User = "USER",
  Guest = "GUEST"
}

Which code snippet correctly checks if a variable r is a valid Role value?

hard

A. if (Object.values(Role).includes(r)) { /* valid */ }

B. if (r in Role) { /* valid */ }

C. if (r === Role) { /* valid */ }

D. if (Role[r]) { /* valid */ }

Solution

1. Step 1: Understand enum value checking

   To check if r is a valid enum value, compare it against the enum's values, not keys.

2. Step 2: Evaluate each option

   if (Object.values(Role).includes(r)) { /* valid */ } uses Object.values(Role).includes(r), correctly checking if r matches any enum string value. if (r in Role) { /* valid */ } checks keys, not values. if (r === Role) { /* valid */ } compares a string to the enum object itself. if (Role[r]) { /* valid */ } tries to index enum with string value, which fails.

3. Final Answer:

   if (Object.values(Role).includes(r)) { /* valid */ } -> Option A

4. Quick Check:

   Check enum values with Object.values() = B [OK]

Hint: Use Object.values(enum).includes(value) to check string enums [OK]

Common Mistakes:

• Checking keys instead of values
• Comparing value directly to enum object
• Using enum indexing with string values