Builder Pattern in TypeScript

Welcome back! So far, we've covered various creational design patterns like the Singleton Pattern, Factory Method Pattern, and Abstract Factory Pattern. These patterns have helped you control and simplify object creation in your programs. Today, we are delving into another powerful creational pattern — the Builder Pattern. This pattern allows you to construct complex objects step by step, making the creation process more manageable and modular.

The Builder Pattern is a design pattern that provides a way to construct complex objects step by step. It decouples the construction process from the representation, allowing the same construction process to create different representations. This pattern includes several key components: the product (the complex object to be created), the builder interface (specifying the construction steps), one or more concrete builders (implementing the construction steps for different representations), and a director (managing the construction process).

Let's break down the implementation of the Builder Pattern in TypeScript with an example. In this example, we will create different types of houses using various builders.

First, we define the House class, which will be our complex object:

class House {
    private foundation: string | null = null;
    private structure: string | null = null;
    private roof: string | null = null;

    public setFoundation(foundation: string): void {
        this.foundation = foundation;
    }

    public setStructure(structure: string): void {
        this.structure = structure;
    }

    public setRoof(roof: string): void {
        this.roof = roof;
    }

    public showHouse(): void {
        console.log(`House with ${this.foundation}, ${this.structure}, and ${this.roof}.`);
    }
}

In this class, the House object has three main parts: the foundation, the structure, and the roof. We also have methods to set these parts and a method to display the house. All properties and method parameters are explicitly typed.