Typescript Enums And Literal Types Complete Guide

Complete Examples, Step by Step for Beginners: TypeScript Enums and Literal Types

Understanding Enums in TypeScript

Enums (short for enumerations) are a way to define a set of named constants that can be used throughout your codebase. This feature helps in making your code more readable and maintainable.

Step 1: Defining a Simple Enum

Let's create an enum called Direction that will contain values for the four cardinal directions.

enum Direction {
    North,
    East,
    South,
    West
}

console.log(Direction.North); // Output: 0
console.log(Direction.East);  // Output: 1
console.log(Direction.South); // Output: 2
console.log(Direction.West);  // Output: 3

By default, TypeScript assigns numeric values to the enum members, starting from 0.

Step 2: Setting Numeric Values for Enum Members

We can also assign specific numeric values to each member of the enum:

enum Direction {
    North = 1,
    East = 2,
    South = 3,
    West = 4
}

console.log(Direction.North); // Output: 1
console.log(Direction.East);  // Output: 2
console.log(Direction.South); // Output: 3
console.log(Direction.West);  // Output: 4

Step 3: Using String Enums

In addition to numeric enums, TypeScript also supports string enums where each value is a string literal:

enum Direction {
    North = "NORTH",
    East = "EAST",
    South = "SOUTH",
    West = "WEST"
}

console.log(Direction.North); // Output: "NORTH"
console.log(Direction.East);  // Output: "EAST"
console.log(Direction.South); // Output: "SOUTH"
console.log(Direction.West);  // Output: "WEST"

Step 4: Getting Keys from Enums

Sometimes, you may need to get all the keys from an enum:

const directions = Object.keys(Direction);
console.log(directions); 
// Output: [ 'North', 'East', 'South', 'West' ] for numeric enum
// Output: ['North', 'East', 'South', 'West'] for string enum

// For numeric enums, Object.values() might include the keys and values:
const directionValues = Object.values(Direction);
console.log(directionValues); 
// Output: ["North", 0, "East", 1, "South", 2, "West", 3] for numeric enum
// Output: [ 'NORTH', 'EAST', 'SOUTH', 'WEST' ] for string enum

Step 5: Using Enums as Parameters

Here’s how to use an enum as a parameter in a function:

enum Action {
    Submit,
    Cancel,
    Reset
}

function handleAction(action: Action): string {
    switch(action) {
        case Action.Submit: return "Action Submitted!";
        case Action.Cancel: return "Action Cancelled!";
        case Action.Reset: return "Action Reset!";
        default: return "Unknown action!";
    }
}

console.log(handleAction(Action.Submit)); // Output: "Action Submitted!"

Understanding Literal Types in TypeScript

Literal types allow you to specify that a variable or function parameter must have a very specific, hardcoded value. They are useful to make your code more explicit.

Step 1: Defining String Literal Types

String literal types ensure that the variable can only hold specific string values.

type DirectionLiteral = 'north' | 'east' | 'south' | 'west';

function moveTo(direction: DirectionLiteral): void {
    console.log(`Moving to ${direction}`);
}

moveTo('north');  // Correct
moveTo('up');     // Error: Argument of type '"up"' is not assignable to parameter of type 'DirectionLiteral'

Step 2: Defining Numeric Literal Types

Numeric literal types are similar to string literal types but they allow numeric values instead.

type PossibleScores = 0 | 5 | 10 | 15;

function awardScore(points: PossibleScores): void {
    console.log(`Awarding ${points} points`);
}

awardScore(5);

awardScore(3);  // Error: Argument of type '3' is not assignable to parameter of type 'PossibleScores'

Step 3: Combining Enums with Literal Types

You can combine enums with literal types to make sure that a variable or parameter holds one of the values from the enum:

enum Color {
    Red,
    Green,
    Blue
}

type ColorLiteral = "Red" | "Green" | "Blue";

function paint(color: ColorLiteral): void {
    console.log(`Painting in color ${color}`);
}

paint(Color.Red.toString());  // Correct, converting enum value to string first
paint("Red");                 // Correct
paint("Yellow");              // Error: Argument of type '"Yellow"' is not assignable to parameter of type 'ColorLiteral'

Step 4: Using Literal Types for Function Return Values

You can also restrict the allowed return values of a function using literal types.

type YesOrNo = 'Yes' | 'No';

function willAttend(event: string): YesOrNo {
    if (event === 'wedding') {
        return 'Yes';
    } else {
        return 'No';
    }
}

console.log(willAttend('wedding'));  // Output: 'Yes'
console.log(willAttend('meeting'));  // Output: 'No'
console.log(willAttend('concert'));  // No error (returns 'Yes' or 'No')

Practical Exercise: Building a Game Control System

Now, let’s use enums and literal types together to build a simple game control system.

Define Enums for Movement and Actions

enum Movement {
    MoveLeft = 'MOVE_LEFT',
    MoveRight = 'MOVE_RIGHT',
    MoveForward = 'MOVE_FORWARD',
    MoveBackward = 'MOVE_BACKWARD'
}

enum Action {
    Shoot = 'SHOOT',
    Jump = 'JUMP',
    Duck = 'DUCK',
    Crouch = 'CROUCH'
}

Create a Type that Combines Movement and Action

type ControlCommand = Movement.Shoot | Movement.Jump | Movement.Duck | Movement.Crouch 
                   | Action.MoveLeft | Action.MoveRight | Action.MoveForward | Action.MoveBackward;

Define the performCommand Function

This function will execute a given command if it matches any of the enum values combined.

function performCommand(command: ControlCommand): string {
    switch(command) {
        case Movement.MoveLeft: 
            return "Moving left...";
        case Movement.MoveRight: 
            return "Moving right...";
        case Movement.MoveForward: 
            return "Moving forward...";
        case Movement.MoveBackward: 
            return "Moving backward...";
        case Action.Shoot: 
            return "Shooting!";
        case Action.Jump: 
            return "Jumping!";
        case Action.Duck: 
            return "Ducking!";
        case Action.Crouch: 
            return "Crouching!";
        default: 
            return "Unknown command!" // This line won't be triggered due to ControlCommand type restriction
    }
}

Testing the System