TypeScript 유니온 타입, 타입 안정성 문제를 체계적으로 풀기

TypeScript를 쓰면서 가장 답답한 건 유니온 타입이다. string | number | undefined 같은 복잡한 타입은 핸들링이 정말 어렵다.

처음부터 정답을 맞히려고 하면 오히려 확인 시간이 길어진다. 타입 에러를 체계적으로 좁혀가는 게 핵심이다.

타입 정의가 정말 필요한 걸 하고 있는지 확인하기

타입 안정성 문제는 화면만 보고 판단하면 놓치는 값이 많다.

먼저 봐야 할 것:

• 타입 정의: 지금 변수가 정말 어떤 타입인지
• 정상일 때의 타입 상태: 기대하는 타입이 뭔지
• 마지막으로 수정한 코드: 타입 가드나 타입 단언 부분

Optional과 Null을 명확히 구분하기

유니온 타입 문제는 대부분 null과 undefined를 제대로 핸들링하지 않아서다.

npm run build
npx tsc --noEmit

optional chaining (?.)과 nullish coalescing (??)의 차이를 정확히 이해해야 한다. undefined만 처리해야 하는지 null도 처리해야 하는지에 따라 코드가 달라진다.

타입 가드로 체계적으로 좁혀가기

타입을 처리할 때는 한 가지씩 확인해야 한다.

1. 현재 타입이 정말 뭔지 확인한다. (console.log의 type 체크)
2. 로그를 보고 뭐가 다른지 정리한다.
3. 배포된 코드가 제대로 빌드되는지 마지막으로 확인한다.

정리하며

해결 자체보다 어떤 값이 달라졌는지 설명할 수 있는 상태가 더 중요하다. 타입 관련 기록을 남겨두면 다음 번 확인이 훨씬 빨라진다.