In this article, we will learn how to use and implement the Command Pattern in TypeScript with an example.

Command is a behavioral design pattern that turns a request into a stand-alone object that contains all information about the request. This transformation lets you parameterize methods with different requests, delay or queue a request’s execution, and support undoable operations.

TypeScript Command Pattern Example

The below diagram shows the generic structure of the Command Pattern:

Let's refer to the above structure to create an example to demonstrates the usage of the Command Pattern.

Let's create commond.ts file and add the following code to it:

namespace CommandPattern {
    export class Command {
        public execute(): void {
            throw new Error("Abstract method!");
        }
    }

    export class ConcreteCommand1 extends Command {
        private receiver: Receiver;

        constructor(receiver: Receiver) {
            super();
            this.receiver = receiver;
        }

        public execute(): void {
            console.log("`execute` method of ConcreteCommand1 is being called!");
            this.receiver.action();
        }
    }

    export class ConcreteCommand2 extends Command {
        private receiver: Receiver;

        constructor(receiver: Receiver) {
            super();
            this.receiver = receiver;
        }

        public execute(): void {
            console.log("`execute` method of ConcreteCommand2 is being called!");
            this.receiver.action();
        }
    }

    export class Invoker {
        private commands: Command[];

        constructor() {
            this.commands = [];
        }

        public storeAndExecute(cmd: Command) {
            this.commands.push(cmd);
            cmd.execute();
        }
    }

    export class Receiver {
        public action(): void {
            console.log("action is being called!");
        }
    }
}

(function main() {
    var receiver: CommandPattern.Receiver = new CommandPattern.Receiver(),
        command1: CommandPattern.Command  = new CommandPattern.ConcreteCommand1(receiver),
        command2: CommandPattern.Command  = new CommandPattern.ConcreteCommand2(receiver),
        invoker : CommandPattern.Invoker  = new CommandPattern.Invoker();

    invoker.storeAndExecute(command1);
    invoker.storeAndExecute(command2);

}());

Run:

• Compile the above code using the TypeScript compiler.
• Above code is compiled to plan JavaScript code
• Run Javascript code using node

command-pattern> tsc --target ES5 .\command.ts
command-pattern> node .\command.js
`execute` method of ConcreteCommand1 is being called!
action is being called!
`execute` method of ConcreteCommand2 is being called!
action is being called!

When to Use Command Pattern

• Use the Command pattern when you want to parametrize objects with operations.

• Use the Command pattern when you want to queue operations, schedule their execution, or execute them remotely.

• Use the Command pattern when you want to implement reversible operations.

All TypeScript Design Patterns

1. Creational Design Patterns

Creational patterns provide various object creation mechanisms, which increase flexibility and reuse of existing code.

1. TypeScript Singleton Pattern Example
2. TypeScript Factory Design Pattern with Example
3. TypeScript Abstract Factory Pattern Example
4. TypeScript Builder Pattern Example
5. TypeScript Prototype Pattern Example

2. Structural Design Patterns

Structural patterns explain how to assemble objects and classes into larger structures while keeping these structures flexible and efficient.

1. TypeScript Bridge Pattern Example
2. TypeScript Adapter Pattern Example
3. TypeScript Decorator Pattern Example
4. TypeScript Composite Pattern Example
5. TypeScript Flyweight Design Pattern Example
6. TypeScript Facade Pattern Example
7. TypeScript Proxy Pattern Example

3. Behavioral Design Patterns

Behavioral design patterns are concerned with algorithms and the assignment of responsibilities between objects.

1. TypeScript Command Pattern Example
2. TypeScript Chain of Responsibility Pattern Example
3. TypeScript Visitor Pattern Example
4. TypeScript Template Method Pattern Example
5. TypeScript Strategy Pattern Example
6. TypeScript State Pattern Example
7. TypeScript Observer Pattern Example
8. TypeScript Memento Pattern Example
9. TypeScript Mediator Pattern Example
10. TypeScript Iterator Pattern Example
11. TypeScript Interpreter Design Pattern Example