TypeScript에서 이벤트 타입이 빌드에서만 에러날 때

이벤트 핸들러의 타입을 다루다 보면 이상한 상황을 마주칠 수 있다. 개발 중에는 아무 문제 없는데, 빌드만 하면 갑자기 타입 에러가 난다. 이럴 때 대부분의 원인은 로컬 환경과 빌드 환경의 차이다.

이벤트 타입은 DOM API의 일부라서, 브라우저 환경과 Node.js 환경에서 다르게 해석될 수 있다. 로컬에서는 dev 서버가 브라우저 환경을 제공하지만, 빌드 시에는 다를 수 있다.

발생 조건 파악하기

이벤트 타입 에러가 나면 먼저 확인할 것들:

• 실제 응답 값
• 정상일 때의 타입 정의
• 빌드 에러 메시지

이 세 가지를 보면 문제가 어디서 비롯되는지 알 수 있다.

타입 정의 확인

build 명령을 실행해보자:

npm run build
npx tsc --noEmit

여기서 나오는 에러가 실제 문제다. 로컬에서는 타입 체크를 안 할 수도 있지만, 빌드 시에는 엄격하게 확인한다.

optional이 문제일 수도 있고, 아닐 수도 있고

이벤트 타입에서 자주 마주치는 건 optional 속성이다. 어떤 이벤트는 특정 속성이 없을 수도 있기 때문이다. 이를 정확히 타입으로 표현해야 한다.

브라우저에서 실제로 어떻게 동작하는지 확인

타입 정의가 맞더라도, 실제 브라우저에서 어떻게 동작하는지 보는 게 중요하다. 이벤트 핸들러의 동작을 직접 확인하면서 타입이 맞는지 검증해야 한다.

타입 가드 설정하기

이벤트 타입이 복잡하면, 타입 가드를 설정해서 각 케이스를 명확히 하자. 이렇게 하면 나중에 같은 문제를 반복하지 않을 수 있다.

1. 원래 증상이 다시 나는지 확인한다.
2. 로그나 응답에서 바뀐 부분을 정리한다.
3. 빌드와 실제 실행 결과를 비교한다.

이벤트 타입은 앞으로도 계속 마주칠 주제니만큼, 한 번 정리하고 나면 다음에는 훨씬 빨리 처리할 수 있다.