String enums in Typescript

Introduction

String enums let you group related string values under one name. This helps keep your code clear and easy to understand.

When you want to represent a fixed set of string options, like directions ("North", "South", "East", "West").

When you need to avoid typos by using named constants instead of raw strings.

When you want to make your code easier to read and maintain by giving meaningful names to string values.

Syntax

Typescript

enum EnumName {
  Member1 = "stringValue1",
  Member2 = "stringValue2",
  Member3 = "stringValue3"
}

Each member must be assigned a string value explicitly.

String enums are useful for readable and safe code instead of using plain strings.

Examples

This enum groups four directions as string values.

Typescript

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

This enum represents possible status values as strings.

Typescript

enum Status {
  Success = "SUCCESS",
  Failure = "FAILURE",
  Pending = "PENDING"
}

Sample Program

This program defines a string enum for colors and prints one color using the enum.

Typescript

enum Color {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

function printColor(color: Color) {
  console.log(`The color is: ${color}`);
}

printColor(Color.Green);

Important Notes

You cannot mix string enums with numeric enums in the same enum.

Using string enums helps prevent mistakes from typing strings directly.

Summary

String enums group related string values under named constants.

They make code easier to read and safer by avoiding raw strings.

Each enum member must have an explicit string value.

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