TypeScript 유니온 타입 다룰 때 타입 가드 순서가 중요한 이유

TypeScript를 쓸 때 골치 아픈 게 유니온 타입이다. 같은 타입이라고 생각했는데 런타임에 실패하거나, 빌드는 성공하는데 실제 데이터가 들어오면 에러가 난다.

특히 API 응답이 유니온 타입일 때, 또는 optional 필드가 많을 때 문제가 크다.

타입 정의를 먼저 정확히

응답 DTO나 인터페이스가 정말로 실제 데이터 형태를 반영하는지 본다. 필드가 optional인지, null일 수 있는지, 유니온 타입이 맞는지.

npm run build
npx tsc --noEmit

빌드할 때 타입 에러가 나면 그걸 무시하지 마. 나중에 런타임 에러가 된다.

optional과 null을 구분하자

field?: string은 필드 자체가 없을 수도 있다는 뜻이고, field: string | null은 필드는 있지만 null일 수 있다는 뜻이다. 이 차이가 실제 코드에서는 크다.

타입 가드 순서

if/else 체크를 할 때 순서도 중요하다. 더 구체적인 타입부터 확인해야 한다. 예를 들어 string | null을 체크할 때는 null부터 먼저 제외하고 시작하는 게 낫다.

마지막엔 실제 화면이나 API 응답을 직접 확인해야 작업이 진짜 끝난다. 타입 체크가 성공해도 실제 데이터가 다를 수 있으니까. 그런 기록을 남겨두면 다음 번엔 금방 찾는다.