Patrón Observer

Notifica automáticamente cuando cambia el estado.

Observer

Permite que objetos notifiquen automáticamente a sus observadores cuando cambian.

typescript

type Listener<T> = (data: T) => void;

class EventEmitter<T = void> {
  private listeners: Map<string, Listener<T>[]> = new Map();

  on(evento: string, listener: Listener<T>) {
    if (!this.listeners.has(evento)) {
      this.listeners.set(evento, []);
    }
    this.listeners.get(evento)!.push(listener);
  }

  off(evento: string, listener: Listener<T>) {
    const lista = this.listeners.get(evento);
    if (lista) {
      const index = lista.indexOf(listener);
      if (index > -1) lista.splice(index, 1);
    }
  }

  emit(evento: string, data: T) {
    const lista = this.listeners.get(evento);
    if (lista) {
      lista.forEach(listener => listener(data));
    }
  }
}

Uso

typescript

const emitter = new EventEmitter<{ mensaje: string }>();

emitter.on("chat", (data) => {
  console.log("Recibido:", data.mensaje);
});

emitter.emit("chat", { mensaje: "Hola mundo" });

Patrón React - useState + Observer

typescript

function useObservable<T>(observable: Observable<T>) {
  const [valor, setValor] = useState(observable.get());

  useEffect(() => {
    return observable.subscribe(setValor);
  }, [observable]);

  return valor;
}

Ejercicio pratico

Implementa un EventEmitter básico con on, off y emit.

exercise.ts

Resultado

Haz clic en "Ejecutar" para ver el resultado...

Patrón Factory

Decorators