TypeScript Facade Design Pattern

What is facade design pattern?

The Facade design pattern is a structural design pattern. It provides a simplified uniform interface for complex libraries or frameworks. By offering this uniform interface, it limits the properties exposed in the subclasses, presenting only the necessary properties to the client.

There are several terminologies in the facade design pattern. These are:

• Facade: It defines the access point for subclasses and redirects the client’s request to related subclass properties.
• Additional Facade: It can be used when the facade class is bloated with unrelated subclass references.
• Subsystem Class: It contains the subclasses that are referenced by the facade. It is not aware of the facade.
• Client: This refers to the application or function that communicates with the facade.

When should the facade design pattern be used?

The facade design pattern can be used when there is a need to work with a complex framework or library, and the application needs to access only a few specific components from that particular library. Instead of directly accessing and using the library, which would require managing dependencies and keeping track of them, the facade design pattern simplifies the necessary parts by creating an interface. Through this interface, the library becomes accessible, resolving the complex dependencies or handling them in a specialized way.

The facade design pattern can also be applied when the number of properties handled by the library increases, and each of these properties involves different objects. In such cases, the facade design pattern allows for organizing this complex system into multiple subsystems, thereby reducing complexity and decoupling.

How to implement facade design pattern in TypeScript

Let’s try to apply the facade design pattern to TypeScript. First, let’s imagine a scenario where we are dealing with car functions, and let’s assume there is a car library available. In this scenario, we only need a few properties from this library to work with our system, such as starting car lights and the air conditioner.

However, the car library is much more complex than our specific needs. If we were to directly delve into this library and use it, we would have to unravel the entire library, identify, and keep track of the dependencies of the properties we intend to use.

If we decide to approach it this way, we would likely make mistakes or get lost in the complex design of the car library. Because of this, we choose to employ the facade design pattern. We aim to limit the exposure to the library’s inner workings and extract only the necessary properties using facades. With these facades, we can access the properties and work with them as needed. Then, we present only the required properties to the client, avoiding unnecessary complexity.

Facade desing pattern diagram

Facade desing pattern diagram

Facade desing pattern code

// Subsystem classes
class Engine {
    start(): void {
        console.log("Engine started");
    }

    stop(): void {
        console.log("Engine stopped");
    }
}

class Lights {
    turnOn(): void {
        console.log("Lights turned on");
    }

    turnOff(): void {
        console.log("Lights turned off");
    }
}

class AirConditioner {
    turnOn(): void {
        console.log("Air conditioner turned on");
    }

    turnOff(): void {
        console.log("Air conditioner turned off");
    }
}

// Facade
class CarFacade {
    private engine: Engine;
    private lights: Lights;
    private airConditioner: AirConditioner;

    constructor() {
        this.engine = new Engine();
        this.lights = new Lights();
        this.airConditioner = new AirConditioner();
    }

    startCar(): void {
        this.engine.start();
        this.lights.turnOn();
        this.airConditioner.turnOn();
        console.log("Car is ready to go!");
    }

    stopCar(): void {
        this.engine.stop();
        this.lights.turnOff();
        this.airConditioner.turnOff();
        console.log("Car stopped");
    }
}

// Client
const carFacade = new CarFacade();
carFacade.startCar();

/*
Engine started
Lights turned on
Air conditioner turned on
Car is ready to go!
*/ 

console.log("------------------");
carFacade.stopCar();

/*
------------------
Engine stopped
Lights turned off
Air conditioner turned off
Car stopped
*/