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

Bridge is a structural design pattern that lets you split a large class or a set of closely related classes into two separate hierarchies —abstraction and implementation—which can be developed independently of each other.

TypeScript Bridge Pattern Example

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

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

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

export class Abstraction {
    implementor: Implementor;
    constructor(imp: Implementor) {
        this.implementor = imp;
    }

    public callIt(s: String): void {
        throw new Error("This method is abstract!");
    }
}

export class RefinedAbstractionA extends Abstraction {
    constructor(imp: Implementor) {
        super(imp);
    }

    public callIt(s: String): void {
        console.log("This is RefinedAbstractionA");
        this.implementor.callee(s);
    }
}

export class RefinedAbstractionB extends Abstraction {
    constructor(imp: Implementor) {
        super(imp);
    }

    public callIt(s: String): void {
        console.log("This is RefinedAbstractionB");
        this.implementor.callee(s);
    }
}

export interface Implementor {
    callee(s: any): void;
}

export class ConcreteImplementorA implements Implementor {
    public callee(s: any) : void {
        console.log("`callee` of ConcreteImplementorA is being called.");
        console.log(s);
    }
}

export class ConcreteImplementorB implements Implementor {
    public callee(s: any) : void {
        console.log("`callee` of ConcreteImplementorB is being called.");
        console.log(s);
    }
}

Usage

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

import { Abstraction, RefinedAbstractionA, RefinedAbstractionB, ConcreteImplementorA, ConcreteImplementorB } from "./bridge";


export function show() : void {
 var abstractionA: Abstraction = new RefinedAbstractionA(new ConcreteImplementorA());
 var abstractionB: Abstraction = new RefinedAbstractionB(new ConcreteImplementorB());

 abstractionA.callIt("abstractionA");
 abstractionB.callIt("abstractionB");
}

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\bridge> tsc --target ES5 .\demo.ts
PS C:\Users\RAMESH\design_patterns_in_typescript\bridge> node .\demo.js
This is RefinedAbstractionA
`callee` of ConcreteImplementorA is being called.
abstractionA
This is RefinedAbstractionB
`callee` of ConcreteImplementorB is being called.
abstractionB

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