← 전체 글로 돌아가기

TypeScript

TypeScript Record 타입 리팩터링할 때 실수 줄이기

TypeScript에서 타입을 수정할 때는 화면만 보고 판단하면 놓치는 게 많다. 빌드 에러와 타입 정의를 함께 확인해야 한다.

TypeScript에서 Record 타입을 다루다가 제대로 안 되면 답답함이 크다. 검색으로 들어온 상황이면 특히 바로 원인부터 잡는 게 빠르다.

정상 상태를 먼저 정하기

사용자 입장에서는 뭐가 잘못된 건지 모를 수 있지만, 빌드 에러는 명확하다. 빌드가 성공하는 상태를 먼저 정해 두고 진행하자.

타입 안정성의 전체 흐름 보기

한 단어의 타입 에러에만 집착하면 다른 부분을 놓친다. 전체 흐름에서 어디가 깨졌는지 파악하자.

  • 먼저 볼 값: 타입 가드가 제대로 작동하는가?
  • 같이 비교할 값: 정상 상태에서의 타입 안정성
  • 남겨둘 기록: 빌드 명령어 출력, 에러 코드, 수정 내역

빌드하고 타입 검사하기

TypeScript는 컴파일 타임에 모든 검사를 끝낸다. 빌드가 성공하면 대부분의 타입 문제는 해결된 것이다.

npm run build
npx tsc --noEmit

이 두 명령으로 충분하다.

선택적 속성과 null 값 확인하기

optional 필드가 애매하면, 빌드는 성공해도 런타임에 에러가 난다. 각 필드가 정말 필요한지 아니면 선택사항인지 명확히 하자.

수정 전에 고정할 것들

타입 문제가 반복된다면, 확인 순서를 고정해 두는 편이 낫다. 매번 감으로 접근하면 같은 실수를 반복하게 된다.

  1. 원래 증상이 같은 조건에서 다시 나는지 확인한다.
  2. 로그나 응답에서 바뀐 부분을 한 줄로 설명해 본다.
  3. 공개 화면, 빌드 결과, 실제 요청 중 하나로 마지막 확인을 한다.

결과가 바뀐 이유를 설명할 수 있으면 된다

해결 자체도 중요하지만, 왜 그렇게 고쳤는지 로그와 응답으로 설명할 수 있으면 충분히 정리된 것이다. 관련 기록을 남겨 두면, 다음 검토가 훨씬 빨라진다.