답변.

타입스크립트는 웹 애플리케이션이나 pub/sub 패턴을 사용할 때 이벤트 객체와의 올바른 작동을 보장하기 위해 사용자 정의 이벤트에 타입을 지정할 수 있습니다. 이벤트의 타입 지정 시 일반적으로 파라미터화된 제너릭 타입인 CustomEvent를 사용합니다:

interface MyEventDetail {
  username: string;
  age: number;
}

const event = new CustomEvent<MyEventDetail>('user:create', {
  detail: { username: 'alice', age: 30 }
});

document.addEventListener('user:create', (e: CustomEvent<MyEventDetail>) => {
  console.log(e.detail.username);
});

주요 주의 사항:

사용하는 이벤트 타입(CustomEvent<T>)이 이벤트를 생성할 때와 처리할 때 일치하는지 확인해야 합니다.
네이티브 이벤트를 사용하는 경우 any나 object가 아닌 기본 이벤트 타입을 사용하세요.
사용자 정의 타입을 만들 때 이벤트 상속에 대해 잊지 마세요.

함정 질문.

자주 묻는 질문: "타사 라이브러리에서 이벤트를 생성하는 경우 event 객체를 처리기에서 직접 CustomEvent<Type>으로 타입화할 수 있나요?"

정확한 답변: 라이브러리가 제너릭과 함께 CustomEvent를 사용하여 이벤트를 생성한다고 완벽하게 확신하는 경우에만 가능합니다. 그렇지 않으면 타입화가 올바르지 않으며 런타임 오류가 발생할 수 있습니다.

예시:

document.addEventListener('some-event', (e: Event) => {
  // 잘못됨: 'e'가 반드시 CustomEvent가 아닙니다
  const detail = (e as CustomEvent<{ id: number }>).detail;
  // 이것은 이벤트가 CustomEvent가 아닌 경우 오류를 발생시킵니다
});

주제의 미세한 차이점에 대한 실제 오류 사례.

이야기

프로젝트에서 pub/sub 추상화를 사용하고 간단한 Event를 통해 이벤트를 발생시켰습니다. event.detail에 접근할 수 있을 것이라고 기대했지만 기본 Event에는 그런 필드가 없어 조용한 undefined와 잡기 힘든 버그가 발생했습니다.

이야기

팀의 일부는 다양한 시나리오에 대해 обработ기 를 "더 빠르게" 적용하기 위해 커스텀 이벤트를 any를 통해 타입화했습니다. 결과적으로 detail을 통해 다양한 데이터 구조를 전달하면서 나중에 오류가 발생하게 되었고, 타입스크립트는 불일치를 감지하지 못했습니다.

이야기

한 프로젝트에서 CustomEvent<string> 타입을 사용하고 detail을 통해 복잡한 객체를 전달했습니다. 실수로 detail을 직렬화하여 처리기 측에서 추가적으로 JSON.parse를 해야 하며, 타입스크립트 내에서 타입화가 손실되는 결과를 초래했습니다.

타입스크립트에서 사용자 이벤트(커스텀 이벤트)에 대한 타입화를 어떻게 구현할 수 있나요? 이벤트 객체 및 데이터 전달 시 고려해야 할 주의 사항은 무엇인가요?

답변.

함정 질문.

주제의 미세한 차이점에 대한 실제 오류 사례.