Implementing Common Design Patterns in TypeScript

Introduction to Design Patterns in TypeScript

In the ever-evolving landscape of software development, building robust, scalable, and maintainable applications is paramount. Design patterns offer proven solutions to common software design problems, providing a blueprint for structuring code that is both flexible and understandable. While JavaScript offers immense flexibility, leveraging these patterns within the type-safe environment of TypeScript can elevate code quality significantly. TypeScript, with its strong typing and object-oriented features, provides an excellent foundation for implementing these venerable patterns, allowing developers to catch errors early and enhance collaboration. This article will delve into three fundamental design patterns—Singleton, Factory, and Observer—demonstrating their implementation in TypeScript and highlighting their practical benefits.

Understanding Core Concepts

Before diving into the patterns, let's briefly define some core concepts that are crucial for understanding their implementation in TypeScript.

• Classes and Interfaces: TypeScript extends JavaScript with classes, providing a conventional way to define blueprints for objects. Interfaces, on the other hand, define contracts for the shape of an object or class without providing implementation details, promoting loose coupling and type safety.
• Static Members: These are members of a class that belong to the class itself rather than to any instance of the class. They are often used for utility functions or to maintain common state across all instances.
• Encapsulation: The principle of bundling data and methods that operate on the data within one unit (e.g., a class), and restricting direct access to some of the component's internal parts. TypeScript's private and protected modifiers facilitate this.
• Polymorphism: The ability of an object to take on many forms. In object-oriented programming, it refers to the ability of different classes to be treated as instances of a common type through shared interfaces or base classes.

The Singleton Pattern in TypeScript

The Singleton pattern ensures that a class has only one instance and provides a global point of access to it. This is particularly useful for managing resources like database connections, configuration managers, or loggers, where having multiple instances could lead to inconsistencies or unnecessary resource consumption.

Principle and Implementation

The core idea is to make the class's constructor private to prevent direct instantiation, and then provide a static method that returns the single instance of the class, creating it only if it doesn't already exist.

class ConfigurationManager {
    private static instance: ConfigurationManager;
    private settings: Map<string, string>;

    private constructor() {
        this.settings = new Map<string, string>();
        // Simulate loading configuration from a file or environment variables
        this.settings.set('API_KEY', 'some_secret_key');
        this.settings.set('LOG_LEVEL', 'info');
        console.log('ConfigurationManager instance created.');
    }

    public static getInstance(): ConfigurationManager {
        if (!ConfigurationManager.instance) {
            ConfigurationManager.instance = new ConfigurationManager();
        }
        return ConfigurationManager.instance;
    }

    public getSetting(key: string): string | undefined {
        return this.settings.get(key);
    }

    public setSetting(key: string, value: string): void {
        this.settings.set(key, value);
        console.log(`Setting '${key}' updated to '${value}'.`);
    }
}

// Usage
const config1 = ConfigurationManager.getInstance();
const config2 = ConfigurationManager.getInstance();

console.log(config1 === config2); // true, both references point to the same instance

console.log('API Key:', config1.getSetting('API_KEY'));
config2.setSetting('LOG_LEVEL', 'debug');
console.log('Log Level (from config1):', config1.getSetting('LOG_LEVEL'));
// new ConfigurationManager(); // This would cause a TypeScript error:
                               // Constructor of class 'ConfigurationManager' is private and only accessible within the class declaration.

Application Scenarios

• Logging: A single logger instance to write logs to a file or a logging service.
• Configuration Manager: Centralized management of application settings.
• Database Connection Pool: Ensuring only one connection pool manages database connections.

The Factory Pattern in TypeScript

The Factory pattern provides an interface for creating objects in a superclass but allows subclasses to alter the type of objects that will be created. It abstracts the object creation process, allowing you to create objects without specifying their exact class, which promotes loose coupling and makes the system more extensible.

Principle and Implementation

The core idea revolves around a "factory" method that creates and returns objects. This method can be implemented in a base class and overridden in subclasses, or it can exist as a standalone factory function/class.

Let's imagine creating different types of vehicles.

// Product Interface
interface Vehicle {
    drive(): void;
    getType(): string;
}

// Concrete Products
class Car implements Vehicle {
    drive(): void {
        console.log('Driving a car.');
    }
    getType(): string {
        return 'Car';
    }
}

class Truck implements Vehicle {
    drive(): void {
        console.log('Driving a truck.');
    }
    getType(): string {
        return 'Truck';
    }
}

// Factory Class
class VehicleFactory {
    public static createVehicle(type: string): Vehicle | null {
        switch (type.toLowerCase()) {
            case 'car':
                return new Car();
            case 'truck':
                return new Truck();
            default:
                console.warn(`Unknown vehicle type: ${type}`);
                return null;
        }
    }
}

// Usage
const myCar = VehicleFactory.createVehicle('car');
if (myCar) {
    myCar.drive(); // Driving a car.
    console.log(myCar.getType()); // Car
}

const myTruck = VehicleFactory.createVehicle('truck');
if (myTruck) {
    myTruck.drive(); // Driving a truck.
    console.log(myTruck.getType()); // Truck
}

const unknownVehicle = VehicleFactory.createVehicle('bike'); // Unknown vehicle type: bike

Application Scenarios

• UI Component Libraries: Creating different types of UI elements (buttons, text fields, etc.) based on specific configurations.
• Data Parsers: Creating different parsers (JSON, XML, CSV) based on the input data format.
• Game Development: Spawning different types of enemies or game objects based on game logic.

The Observer Pattern in TypeScript

The Observer pattern defines a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically. This pattern is fundamental for implementing event handling systems.

Principle and Implementation

It involves two main types of objects:

• Subject (Publisher): The object whose state is being monitored. It maintains a list of its dependents (observers) and notifies them of any state changes.
• Observer (Subscriber): The object that wants to be notified of changes in the Subject's state. It provides an update method that the Subject calls.

// Observer Interface
interface Observer {
    update(data: any): void;
}

// Subject Class
class StockMarket implements Subject {
    private observers: Observer[] = [];
    private stockPrice: number;

    constructor(initialPrice: number) {
        this.stockPrice = initialPrice;
    }

    public attach(observer: Observer): void {
        const isExist = this.observers.includes(observer);
        if (isExist) {
            return console.log('Subject: Observer already attached.');
        }
        console.log('Subject: Attached an observer.');
        this.observers.push(observer);
    }

    public detach(observer: Observer): void {
        const observerIndex = this.observers.indexOf(observer);
        if (observerIndex === -1) {
            return console.log('Subject: Nonexistent observer.');
        }
        this.observers.splice(observerIndex, 1);
        console.log('Subject: Detached an observer.');
    }

    public notify(): void {
        console.log('Subject: Notifying observers...');
        for (const observer of this.observers) {
            observer.update(this.stockPrice);
        }
    }

    public setStockPrice(newPrice: number): void {
        this.stockPrice = newPrice;
        console.log(`Stock price changed to: $${this.stockPrice}`);
        this.notify();
    }
}

// Concrete Observer
class Investor implements Observer {
    private name: string;

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

    update(price: any): void {
        console.log(`${this.name}: Stock price updated to $${price}. Time to react!`);
    }
}

// Usage
const market = new StockMarket(100);

const investor1 = new Investor('Alice');
const investor2 = new Investor('Bob');

market.attach(investor1);
market.attach(investor2);

market.setStockPrice(105);
// Subject: Notifying observers...
// Alice: Stock price updated to $105. Time to react!
// Bob: Stock price updated to $105. Time to react!

market.detach(investor1);

market.setStockPrice(98);
// Subject: Notifying observers...
// Bob: Stock price updated to $98. Time to react!

Application Scenarios

• Event Handling: In UI frameworks (like React, Angular), events (clicks, input changes) are often handled using an observer-like mechanism.
• MVC/MVVM Architectures: Models notify views/view-models of data changes.
• Real-time Applications: Notifying connected clients about updates, e.g., chat applications or stock tickers.

Conclusion

Implementing design patterns in TypeScript provides a powerful combination of structured problem-solving and type safety. The Singleton, Factory, and Observer patterns, as demonstrated, offer robust solutions for common architectural challenges, enhancing code modularity, testability, and maintainability. By embracing these patterns, developers can build more resilient and scalable applications that are easier to understand and evolve, truly leveraging TypeScript's capabilities to write professional and future-proof code.