This post shows how to use the Builder Pattern in TypeScript with an example.

The definition of the Builder Pattern is a separation of the construction of a complex object from its representation.

The builder pattern allows you to enforce a step-by-step process to construct a complex object as a finished product. In this pattern, the step-by-step construction process remains the same but the finished products can have different representations.

TypeScript Builder Pattern Example

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

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

Create builder.ts file and add the following code to it:

    export class UserBuilder {
        private name: string;
        private age: number;
        private phone: string;
        private address: string;

        constructor(name: string) {
            this.name = name;
        }

        get Name() {
            return this.name;
        }
        setAge(value: number): UserBuilder {
            this.age = value;
            return this;
        }
        get Age() {
            return this.age;
        }
        setPhone(value: string): UserBuilder {
            this.phone = value;
            return this;
        }
        get Phone() {
            return this.phone;
        }
        setAddress(value: string): UserBuilder {
            this.address = value;
            return this;
        }
        get Address() {
            return this.address;
        }

        build(): User {
            return new User(this);
        }
    }

    export class User {
        private name: string;
        private age: number;
        private phone: string;
        private address: string;

        constructor(builder: UserBuilder) {
            this.name = builder.Name;
            this.age = builder.Age;
            this.phone = builder.Phone;
            this.address = builder.Address
        }

        get Name() {
            return this.name;
        }
        get Age() {
            return this.age;
        }
        get Phone() {
            return this.phone;
        }
        get Address() {
            return this.address;
        }
    }

Usage

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

import { User, UserBuilder } from "./builder";

export function show() : void {
 var u: User = new UserBuilder("Admin")
    .setAge(26)
    .setPhone("0123456789")
    .setAddress("india")
    .build();
 console.log(u.Name + " " + u.Age + " " + u.Phone + " " + u.Address);
}

show();

Run:

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

PS C:\Users\RAMESH\design_patterns_in_typescript\builder> tsc --target ES5 .\demo.ts
PS C:\Users\RAMESH\design_patterns_in_typescript\builder> node .\demo.js
Admin 26 0123456789 india

Advantages of Builder Pattern

The main advantages of the Builder Pattern are as follows:

• It provides a clear separation between the construction and representation of an object.
• It provides better control over the construction process.
• It supports to change the internal representation of objects.

Check out how to install TypeScript compiler and run TypeScript file in VS Code at https://www.javaguides.net/2019/09/install-typescript-compiler-and-run-code.html

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