Design Pattern: Template Method Pattern in TypeScript

In Template Method pattern we have some abstract methods(or methods with default implementation), and the actual implementation is done in the subclasses. This is used when there are similar algorithms, but with different steps in implementation.

Check Details of Template Method Pattern

This article demonstrates Template Method pattern implementations in TypeScript. Check the following examples.

Implementation

Here is a simple example of the Template Method pattern in TypeScript-

Create an abstract class. Declare abstract methods for each step(provide default definition of some method if required). Define a method for executing the steps.
Define subclasses of the template class and define the abstract methods as per requirement. Methods in each subclass will be different from each other.
For using the implementation, create an instance of the subclasses and call the main execution method(which is defined in the abstract class).

Here is a simple implementation of Template Method in TypeScript-

// Template method implementation in TypeScript

// Abstract Template
abstract class Template {
    public abstract stepA(): void;
    public abstract stepB(): void;

    public stepC(): void {
        console.log("Executing Step C of Template");
    }

    private stepD(): void {
        console.log("Executing Step D of Template");
    }

    public process(): void {
        this.stepA();
        this.stepB();
        this.stepC();
        this.stepD();
    }
}

// Concrete Template implementation
class ConcreteA extends Template {
    public stepA(): void {
        console.log("Executing Step A of ConcreteA");
    }

    public stepB(): void {
        console.log("Executing Step B of ConcreteA");
    }
}

// Concrete Template implementation
class ConcreteB extends Template {
    public stepA(): void {
        console.log("Executing Step A of ConcreteB");
    }

    public stepB(): void {
        console.log("Executing Step B of ConcreteB");
    }
}

// Demo
const concreteA = new ConcreteA();
concreteA.process();

Output will be as below-

Executing Step A of ConcreteA
Executing Step B of ConcreteA
Executing Step C of Template
Executing Step D of Template

Examples

Here are a few examples of Template Method pattern in TypeScript-

Example #1: Transport Construction

Let’s consider an example of a transport builder.

Transport Abstract Class

// transport.ts

abstract class Transport {
    public abstract createBody(): void;
    public abstract addEngine(): void;
    public abstract addWheel(): void;
    public abstract addWing(): void;

    private addSeat(): void {
        console.log("Adding seats");
    }

    private paint(): void {
        console.log("Painting");
    }

    public build(): void {
        this.createBody();
        this.addEngine();
        this.addWheel();
        this.addWing();
        this.addSeat();
        this.paint();
    }
}

export default Transport;

Car Transport Class

// car.ts

import Transport from "./transport";

class Car extends Transport {
    createBody(): void {
        console.log("Creating Car Body");
    }

    addEngine(): void {
        console.log("Adding Engine to Car");
    }

    addWheel(): void {
        console.log("Adding 4 Wheels to Car");
    }

    addWing(): void {
        // Not required for Car
    }
}

export default Car;

Bike Transport Class

// bike.ts

import Transport from "./transport";

class Bike extends Transport {
    createBody(): void {
        console.log("Creating Bike Body");
    }

    addEngine(): void {
        console.log("Adding Engine to Bike");
    }

    addWheel(): void {
        console.log("Adding 2 Wheels to Bike");
    }

    addWing(): void {
        // not required for Bike
    }
}

export default Bike;

Plane Transport Class

// plane.ts

import Transport from "./transport";


class Plane extends Transport {
    createBody(): void {
        console.log("Creating Plane Body");
    }

    addEngine(): void {
        console.log("Adding Engine to Plane");
    }

    addWheel(): void {
        console.log("Adding 3 Wheels to Plane");
    }

    addWing(): void {
        console.log("Adding Wings Plane");
    }
}

export default Plane;

Train Transport Class

// train.ts

import Transport from "./transport";

class Train extends Transport {
    createBody(): void {
        console.log("Creating Train Body");
    }

    addEngine(): void {
        console.log("Adding Engine to Train");
    }

    addWheel(): void {
        console.log("Adding Wheels to Train");
    }

    addWing() : void{
        // not required for train
    }
}

export default Train;

Demo

// demo.ts

import Car from "./car";
import Plane from "./plane";
import Transport from "./transport";


const car: Transport = new Car();
car.build();

const plane: Transport = new Plane();
plane.build();

Output

Creating Car Body
Adding Engine to Car
Adding 4 Wheels to Car
Adding seats
Painting


Creating Plane Body
Adding Engine to Plane
Adding 3 Wheels to Plane
Adding Wings Plane
Adding seats
Painting