TypeScript Record 타입 에러를 빠르게 잡는 법

TypeScript에서 Record를 써서 설정 객체나 맵 같은 걸 만들다 보면, 타입 체크는 통과하는데 런타임에서 값이 없는 경우가 생긴다.

빌드 에러부터 확인

npm run build를 돌려서 타입 에러가 뭐라고 하는지 먼저 본다. TypeScript는 보통 정확하게 뭐가 빠졌는지 알려준다.

npm run build
npx tsc --noEmit

Record의 키가 정확히 뭔지 확인하는 게 중요하다. 자주 하는 실수는 정의한 키와 실제 값을 넣을 때 키가 다른 경우다.

optional과 null 구분

Record 타입을 만들 때 필드가 있을 수도 있고 없을 수도 있으면 optional로 선언하는데, null일 가능성이 있으면 따로 처리해야 한다.

// 필드가 없을 수 있음
type Config = Record<string, string | undefined>;

// null이 들어올 수 있음
type Config = Record<string, string | null>;

런타임 값 확인

타입 체크는 통과했는데 화면에 값이 없으면, 로그를 찍어서 실제로 뭐가 들어왔는지 확인한다. 데이터베이스에서 가져온 값, API 응답, 환경변수 같은 데이터 소스를 하나씩 점검하면서 각 단계에서 뭐가 들어왔는지 본다.

작은 기록도 나중에 비슷한 문제가 났을 때 정말 도움이 된다.