How can I implement the Observer pattern in TypeScript?

How can I implement the Observer pattern in TypeScript?

The Observer pattern allows an object, known as the subject, to maintain a list of dependents, called observers, and notify them of state changes. In TypeScript, you can implement it using interfaces and classes.

Can you show me a simple code example?

Sure! Here's a basic implementation:

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

class Subject {
    private observers: Observer[] = [];

    addObserver(observer: Observer) {
        this.observers.push(observer);
    }

    removeObserver(observer: Observer) {
        this.observers = this.observers.filter(obs => obs !== observer);
    }

    notifyObservers(data: any) {
        this.observers.forEach(observer => observer.update(data));
    }
}

class ConcreteObserver implements Observer {
    update(data: any) {
        console.log(`Observer received data: ${data}`);
    }
}

// Usage
const subject = new Subject();
const observer1 = new ConcreteObserver();
subject.addObserver(observer1);
subject.notifyObservers('Hello Observers!');

What are some use cases for the Observer pattern?

The Observer pattern is commonly used in event handling systems, like UI frameworks, where changes in one part of the application need to be reflected in others. It's also useful in implementing publish-subscribe systems.