[typescript] 제네릭 인터페이스를 활용하여 객체의 상태 변화 추적하기
소개
이번 글에서는 TypeScript의 제네릭(Generic) 인터페이스를 활용하여 객체의 상태 변화를 추적하는 방법에 대해 알아보겠습니다.
객체의 상태 변화 추적하기
일반적으로 객체의 상태 변화를 추적하기 위해서는 Observer 패턴을 활용합니다. TypeScript에서는 제네릭 인터페이스를 사용하여 객체의 상태 변화를 추적하는 간단한 예제를 살펴보겠습니다.
예를 들어, 다음과 같이 Observable이라는 인터페이스를 정의할 수 있습니다.
interface Observable<T> {
subscribe(observer: (state: T) => void): void;
unsubscribe(observer: (state: T) => void): void;
notify(state: T): void;
}
위의 코드에서 Observable은 제네릭을 활용하여 state의 타입을 동적으로 지정할 수 있도록 합니다. 이제 이를 활용하여 객체의 상태 변화를 추적할 수 있습니다.
예제
다음은 Counter 클래스를 정의하고 Observable 인터페이스를 구현한 예제입니다.
class Counter implements Observable<number> {
private count: number = 0;
private observers: ((state: number) => void)[] = [];
subscribe(observer: (state: number) => void): void {
this.observers.push(observer);
}
unsubscribe(observer: (state: number) => void): void {
this.observers = this.observers.filter((ob) => ob !== observer);
}
notify(state: number): void {
this.observers.forEach((observer) => observer(state));
}
increment(): void {
this.count++;
this.notify(this.count);
}
}
const counter = new Counter();
counter.subscribe((state) => console.log(`Counter state: ${state}`));
counter.increment();
counter.increment();
위의 예제에서 Counter 클래스는 Observable 인터페이스를 구현하고, increment 메서드를 호출할 때마다 상태 변화를 추적합니다.
이제 TypeScript의 제네릭 인터페이스를 활용하여 객체의 상태 변화를 추적하는 방법에 대해 기본적으로 이해하셨을 것입니다.
결론
제네릭 인터페이스를 활용하여 TypeScript에서 객체의 상태 변화를 추적하는 방법을 살펴보았습니다. 이를 활용하여 Observer 패턴을 쉽게 구현할 수 있으며, 코드의 재사용성과 확장성을 높일 수 있습니다.
감사합니다.