[typescript] 옵서버 패턴과 타입스크립트의 결합 사례

21 Dec 2023

typescript

옵서버 패턴은 한 객체의 상태 변화에 따라 다른 객체가 자동으로 알림을 받아 처리할 수 있는 디자인 패턴입니다. 이 패턴은 여러 객체 간의 느슨한 결합을 가능하게 하며, 상태 변화에 따라 객체 간의 의존성을 줄일 수 있습니다. 타입스크립트는 이러한 디자인 패턴을 사용하여 안전한 타입 체킹 및 자동 완성 등의 장점을 제공합니다. 이번 포스트에서는 옵서버 패턴을 타입스크립트로 구현하는 방법과 그 활용 사례에 대해 알아보겠습니다.

옵서버 패턴의 구현

옵서버 패턴을 타입스크립트로 구현하려면 먼저 옵서버와 주제(Subject) 간의 인터페이스를 정의해야 합니다.

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

interface Subject {
  registerObserver: (observer: Observer) => void;
  removeObserver: (observer: Observer) => void;
  notifyObservers: () => void;
}

위 코드에서 Observer 인터페이스는 옵서버 객체가 구현해야 하는 메서드를 정의하고, Subject 인터페이스는 주제 객체가 구현해야 하는 메서드를 정의합니다.

다음은 위에서 정의한 인터페이스를 구현한 구체적인 클래스 예제입니다.

class WeatherStation implements Subject {
  private temperature: number;
  private observers: Observer[] = [];

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

  removeObserver(observer: Observer) {
    const index = this.observers.indexOf(observer);
    if (index >= 0) {
      this.observers.splice(index, 1);
    }
  }

  notifyObservers() {
    this.observers.forEach(observer => observer.update(this.temperature));
  }

  setTemperature(temperature: number) {
    this.temperature = temperature;
    this.notifyObservers();
  }
}

class TemperatureDisplay implements Observer {
  update(data: number) {
    console.log(`Temperature is ${data}`);
  }
}

const weatherStation = new WeatherStation();
const temperatureDisplay = new TemperatureDisplay();

weatherStation.registerObserver(temperatureDisplay);
weatherStation.setTemperature(25);
weatherStation.removeObserver(temperatureDisplay);
weatherStation.setTemperature(30);

위 코드에서 WeatherStation 클래스는 Subject 인터페이스를 구현하고, TemperatureDisplay 클래스는 Observer 인터페이스를 구현합니다.

결론

타입스크립트를 사용하여 옵서버 패턴을 구현하면 코드의 안정성과 가독성을 높일 수 있습니다. 옵서버 패턴은 객체 간의 상호작용을 유연하게 구현할 수 있는 강력한 도구이며, 타입스크립트와의 결합으로 더욱 효과적으로 활용할 수 있습니다.

이러한 디자인 패턴과 타입스크립트의 결합은 소프트웨어의 모듈화와 유연성을 높여주며, 유지보수 및 확장성에도 도움을 줄 수 있습니다.

옵서버 패턴의 구현

결론

참고 자료