Revising Basic Design Patterns: Composition in TypeScript

Hello, welcome back! Today, we will decode the fundamentals of Revising Basic Design Patterns - Composition! A vital component of software design patterns, Composition aids us in creating complex classes using simpler ones. With TypeScript, we have the added advantage of leveraging its powerful type system to ensure robust class structures. Our journey today includes understanding the concept of composition, its value in software development, and how to practically implement it in TypeScript.

To kick-start our exploration, let's understand Composition. In object-oriented programming (OOP), composition allows a class to include other classes, paving the way for the creation of complex systems out of simpler components. For instance, when building a car, we bring together independent pieces like the engine, wheels, and seats — a perfect reflection of composition in everyday life. Note that in composition, should the parent object (the car) be destroyed, the child objects (the components) also cease to exist.

Now, let's translate the theory into a TypeScript code application. Transforming the previously mentioned car example, a Car class in TypeScript is created by making objects of the Engine, Wheels, and Seats classes. The Car class owns these child objects; their existence is dependent on the Car.

class Engine {
    start(): void {
        console.log("Engine starts");  // Engine start message
    }

    stop(): void {
        console.log("Engine stops");   // Engine stop message
    }
}

class Wheels {
    rotate(): void {
        console.log("Wheels rotate");  // Wheel rotation message
    }
}

class Seats {
    adjust(position: string): void {
        console.log(`Seats adjusted to position ${position}`); // Seat adjustment message
    }
}

class Car {
    private engine: Engine;
    private wheels: Wheels;
    private seats: Seats;

    constructor() {
        this.engine = new Engine();
        this.wheels = new Wheels();
        this.seats = new Seats();
    }

    start(): void {
        this.engine.start();  // Call to start engine
        this.seats.adjust('upright');  // Adjust seat position
        this.wheels.rotate();  // Get wheels rolling
    }
}

const myCar = new Car();
myCar.start();  // Begin car functions

/*
Prints:
Engine starts
Seats adjusted to position upright
Wheels rotate
*/

In the above code, the Car class encapsulates Engine, Wheels, and Seats objects, which are independent but part of the Car class, forming a Composition pattern.