TypeScript TS2802 오류: 관찰자 패턴 Set 전개 Array.from 변환으로 해결

TypeScript 컴파일 오류 TS2802: 관찰자 패턴 Set 전개 Array.from 변환으로 해결

TypeScript 컴파일 오류 TS2802 때문에 관찰자 패턴 구현에 막혔다면, 이 글이 도움이 될 수 있습니다. Set 전개를 Array.from으로 변환하는 간단한 방법으로 문제를 해결했습니다.

시도와 함정

관찰자 패턴을 구현하면서 Set을 전개하는 부분에서 TypeScript 컴파일 오류 TS2802가 발생했습니다. 처음에는 Set의 타입이 문제인가 싶어서 여러 가지 시도를 해봤죠.

class Observer {
  private subscribers = new Set<() => void>();
subscribe(callback: () => void) {
this.subscribers.add(callback);
}
notify() {
// 여기서 TS2802 오류 발생
for (const callback of [...this.subscribers]) {
callback();
}
}
}

위 코드처럼 [...this.subscribers] 형태로 Set을 배열로 전개하려고 할 때, TypeScript는 이를 제대로 인식하지 못하고 TS2802: Cannot find module '...' or its corresponding type declarations.와 유사한 오류를 뱉었습니다. 처음에는 라이브러리 설정 문제인가 싶어서 한참을 헤맸습니다.

원인

결론적으로 문제는 Set 전개 방식 자체에 있었습니다. TypeScript가 ... 스프레드 연산자를 Set에 적용할 때, 내부적으로 타입을 정확히 추론하지 못하는 경우가 있었습니다. 특히 특정 버전이나 환경에서 이런 문제가 더 두드러질 수 있습니다.

해결

이 문제를 해결하기 위해 Set 전개를 Array.from()으로 명시적으로 변환하는 방법을 사용했습니다.

class Observer {
  private subscribers = new Set<() => void>();
subscribe(callback: () => void) {
this.subscribers.add(callback);
}
notify() {
// Array.from으로 변환하여 해결
for (const callback of Array.from(this.subscribers)) {
callback();
}
}
}

Array.from(this.subscribers)를 사용하면 TypeScript는 Set을 명확하게 배열로 인식하고, 루프를 정상적으로 실행할 수 있습니다.

결과

• TypeScript 컴파일 오류 TS2802가 깔끔하게 해결되었습니다.
• 관찰자 패턴의 notify 메서드가 의도대로 동작하게 되었습니다.
• 더 이상 불필요한 타입 관련 삽질을 하지 않아도 되었습니다.

정리 — 같은 함정 안 빠지려면

• [ ] TypeScript에서 Set 전개 시 TS2802 오류가 발생하면 Array.from() 변환을 시도해보세요.
• [ ] 오류 메시지를 맹목적으로 따라가기보다, 코드의 특정 부분(여기서는 Set 전개)에 집중해보세요.
• [ ] 라이브러리 설정이나 타입 정의를 확인하기 전에, 코드 자체의 명확성을 먼저 높이는 방법을 고려해보세요.