타입스크립트 꿀팁

카카오엔터테인먼트 개발자가 TypeScript를 초기부터 실무에 적용하면서 체득한 4가지 핵심 팁을 정리한 글이다. enum, index signature, 외부 패키지 타입 치환, 타입 가드의 실용적 사용법을 코드 예제와 함께 설명한다.

핵심 포인트 - enum 대신 union type 권장: enum은 컴파일 시 런타임 객체 생성, union은 완전 타입 정보만 유지 - const enum으로 런타임 영향을 피할 수 있지만 import 없이 사용 가능한 union type이 생산성 우위 - index signature 대신 mapped type 사용: 타입에 새 키 추가 시 컴파일 에러로 누락 방지 - 외부 패키지 DefaultRootState 같은 글로벌 타입 interface를 declare module로 치환 가능 - typeof, in 키워드, discriminated union(type 공통 속성)으로 타입 가드 구현 - TypeScript 3.7+ asserts 키워드로 함수 단언 타입 가드 선언 가능

상세 정리 - enum 컴파일 결과: var Fruit; (function(Fruit){...})(Fruit={}) 형태로 런타임 객체 생성 - const enum: 컴파일 시 값을 인라인으로 치환, 런타임 객체 없음. 그러나 여전히 import 필요 - union type은 import 없이 리터럴 값 직접 사용 가능 → <FruitDetail fruit="apple"> - index signature {[key: string]: number}: 새 키 추가 누락 시 런타임 에러만 발생 - mapped type {[key in Fruit]: number}: Fruit에 새 값 추가 시 PRICE_MAP 컴파일 에러 → 안전 - 외부 패키지 타입 치환 방법 1: useSelector 사용 시마다 제네릭 명시 (반복 작업) - 외부 패키지 타입 치환 방법 2: useTypedSelector 래퍼 함수 작성 (새 규칙 강제) - 외부 패키지 타입 치환 방법 3: declare module로 DefaultRootState 인터페이스 확장 (최선) - typeof 타입 가드: if(typeof age === "number") 블록 내에서 number 타입으로 좁혀짐 - in 키워드 타입 가드: if("age" in value)로 두 인터페이스 구분 - discriminated union: type 공통 속성 추가 후 switch(value.type)으로 다형성 처리 - asserts 타입 가드: function assert(v: any): asserts v → 이후 코드에서 undefined 제거

왜 읽나: TypeScript를 쓰면서 any로 도피하거나 반복 코드를 피하지 못했다면, 실무 적용 가능한 구체적 해법 4가지를 코드와 함께 바로 가져갈 수 있다.