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

Template Method is a behavioral design pattern that defines the skeleton of an algorithm in the superclass but lets subclasses override specific steps of the algorithm without changing its structure.

TypeScript Template Method Pattern Example

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

export class AbstractClass {
    public method1(): void {
        throw new Error("Abstract Method");
    }

    public method2(): void {
        throw new Error("Abstract Method");
    }

    public method3(): void {
        throw new Error("Abstract Method");
    }

    public templateMethod(): void {
        console.log("templateMethod is being called");
        this.method1();
        this.method2();
        this.method3();
    }
}

export class ConcreteClass1 extends AbstractClass {
    public method1(): void {
        console.log("method1 of ConcreteClass1");
    }

    public method2(): void {
        console.log("method2 of ConcreteClass1");
    }

    public method3(): void {
        console.log("method3 of ConcreteClass1");
    }
}

export class ConcreteClass2 extends AbstractClass {
    public method1(): void {
        console.log("method1 of ConcreteClass2");
    }

    public method2(): void {
        console.log("method2 of ConcreteClass2");
    }

    public method3(): void {
        console.log("method3 of ConcreteClass2");
    }
}

Usage

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

import { ConcreteClass1, ConcreteClass2 } from "./templateMethod";

export function show() : void {
 var c1: ConcreteClass1 = new ConcreteClass1(),
  c2: ConcreteClass2 = new ConcreteClass2();

 c1.templateMethod();
 c2.templateMethod();

}
show();

Run:

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

design_patterns_in_typescript\template_method> tsc --target ES5 .\demo.ts
design_patterns_in_typescript\template_method> node .\demo.js
templateMethod is being called
method1 of ConcreteClass1
method2 of ConcreteClass1
method3 of ConcreteClass1
templateMethod is being called
method1 of ConcreteClass2
method2 of ConcreteClass2
method3 of ConcreteClass2

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