Command Pattern in TypeScript

Introduction to the Command Pattern

Welcome to the Behavioral Patterns course! In this lesson, we will explore the Command Pattern, a fundamental design pattern that is highly useful for promoting flexible and reusable code. This pattern is particularly effective in scenarios where you need to parameterize objects with operations, queues, or logs. You might recall from previous lessons that behavioral design patterns assist with object communication and responsibility distribution within your software. The Command Pattern encapsulates a request as an object, thereby allowing users to parameterize clients with queues, requests, and operations. This encapsulation enables us to decouple the sender from the receiver, enhancing the flexibility and maintainability of the system. The Command Pattern involves creating a command interface or abstract class with an execute method. We create concrete command classes that implement this interface or extend the abstract class, each representing a specific action. Finally, we integrate these commands with a request invoker to execute actions. This structure allows us to easily extend or modify commands without changing the invoker or the receiver.

Key Components and Their Implementation

To understand the Command Pattern, we should first identify its essential components: Command, Receiver, Concrete Commands, and Invoker . In TypeScript, we can use interfaces or abstract classes to define contracts for our components, and we can leverage type annotations to ensure type safety and clarity. Here’s a breakdown of each component, along with their TypeScript implementations. Each of these components plays a critical role in decoupling the sender and receiver, thereby making the system more modular and flexible.

Command Interface

The Command interface defines an execute method that all concrete commands must implement. This setup provides a consistent method signature for executing various commands, making the system easier to extend. In TypeScript, we can use an interface to enforce this contract: TypeScript interface Command {execute(): void;} Alternatively, you could use an abstract class if you want to provide shared logic or enforce the contract in a different way: TypeScript abstract class Command {abstract execute(): void;} For this lesson, we will use the interface approach for clarity and simplicity. The Command Pattern is also well-suited for supporting undo and redo operations. In addition to the execute method, commands can optionally implement an undo method, making it easy to reverse actions when needed. While our example focuses on execute for simplicity, adding undo is a common extension of this pattern.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Putting It All Together

Now that we have broken down the Command Pattern into its core components, let's put it all together in a cohesive example. The RemoteControl (invoker) holds and triggers the command objects without knowing their implementation details. The LightOnCommand and LightOffCommand (concrete commands) encapsulate actions on the Light (receiver), translating invoker requests into specific receiver operations. This setup decouples the sender (invoker) from the receiver, promoting flexibility and extensibility in the system. This example demonstrates how encapsulating requests as objects can significantly simplify the design of a system with multiple actions and receivers.

TypeScript

interface Command {
    execute(): void;
}

class Light {
    on(): void {
        console.log("Light is on.");
    }

    off(): void {
        console.log("Light is off.");
    }
}

class LightOnCommand implements Command {
    private light: Light;

    constructor(light: Light) {
        this.light = light;
    }

    execute(): void {
        this.light.on();
    }
}

class LightOffCommand implements Command {
    private light: Light;

    constructor(light: Light) {
        this.light = light;
    }

    execute(): void {
        this.light.off();
    }
}

class RemoteControl {
    private command: Command | null = null;

    setCommand(command: Command): void {
        this.command = command;
    }

    pressButton(): void {
        if (this.command) {
            this.command.execute();
        }
    }
}

const light: Light = new Light();
const lightOn: Command = new LightOnCommand(light);
const lightOff: Command = new LightOffCommand(light);

const remote: RemoteControl = new RemoteControl();
remote.setCommand(lightOn);
remote.pressButton(); // Output: Light is on.
remote.setCommand(lightOff);
remote.pressButton(); // Output: Light is off.

interface Command {
    execute(): void;
}

class Light {
    on(): void {
        console.log("Light is on.");
    }

    off(): void {
        console.log("Light is off.");
    }
}

class LightOnCommand implements Command {
    private light: Light;

    constructor(light: Light) {
        this.light = light;
    }

    execute(): void {
        this.light.on();
    }
}

class LightOffCommand implements Command {
    private light: Light;

    constructor(light: Light) {
        this.light = light;
    }

    execute(): void {
        this.light.off();
    }
}

class RemoteControl {
    private command: Command | null = null;

    setCommand(command: Command): void {
        this.command = command;
    }

    pressButton(): void {
        if (this.command) {
            this.command.execute();
        }
    }
}

const light: Light = new Light();
const lightOn: Command = new LightOnCommand(light);
const lightOff: Command = new LightOffCommand(light);

const remote: RemoteControl = new RemoteControl();
remote.setCommand(lightOn);
remote.pressButton(); // Output: Light is on.
remote.setCommand(lightOff);
remote.pressButton(); // Output: Light is off.

Enhancing the Command Pattern

To make the example more dynamic and extendable while maintaining the proper usage of the Command Pattern with an invoker, we can introduce a map within the invoker to manage our command objects. This adjustment allows us to easily look up and execute commands based on keys while still preserving the invoker's role. In TypeScript, we can use an object or a Map with string keys and Command values, and we can annotate the property accordingly. Here’s an updated version of the main section:

TypeScript

class RemoteControl {
    private commands: { [key: string]: Command } = {};

    setCommand(name: string, command: Command): void {
        this.commands[name] = command;
    }

    pressButton(name: string): void {
        if (this.commands[name]) {
            this.commands[name].execute();
        } else {
            console.log(`No command named '${name}' found.`);
        }
    }
}

const light: Light = new Light();
const lightOn: Command = new LightOnCommand(light);
const lightOff: Command = new LightOffCommand(light);

const remote: RemoteControl = new RemoteControl();
remote.setCommand("lightOn", lightOn);
remote.setCommand("lightOff", lightOff);

// Simulate user input
remote.pressButton("lightOn"); // Output: Light is on.
remote.pressButton("lightOff"); // Output: Light is off.

class RemoteControl {
    private commands: { [key: string]: Command } = {};

    setCommand(name: string, command: Command): void {
        this.commands[name] = command;
    }

    pressButton(name: string): void {
        if (this.commands[name]) {
            this.commands[name].execute();
        } else {
            console.log(`No command named '${name}' found.`);
        }
    }
}

const light: Light = new Light();
const lightOn: Command = new LightOnCommand(light);
const lightOff: Command = new LightOffCommand(light);

const remote: RemoteControl = new RemoteControl();
remote.setCommand("lightOn", lightOn);
remote.setCommand("lightOff", lightOff);

// Simulate user input
remote.pressButton("lightOn"); // Output: Light is on.
remote.pressButton("lightOff"); // Output: Light is off.

In this enhancement, commands are stored in a map within the RemoteControl (invoker), simplifying command referencing and execution via keys. This structure maintains the integrity of the Command Pattern, ensuring that the invoker triggers the commands. This dynamic structure helps handle various inputs and extends the system with ease, while TypeScript's type system ensures type safety and clarity.

Command Pattern in TypeScript

Introduction to the Command Pattern

Key Components and Their Implementation

Command Interface

Join the 1M+ learners on CodeSignal

Receiver

Concrete Commands

Invoker

Putting It All Together

Enhancing the Command Pattern

Conclusion