TypeScript란?
TypeScript는 JavaScript에 정적 타입 시스템을 추가한 언어입니다. Microsoft가 개발했으며, 컴파일 시 순수 JavaScript로 변환됩니다. 2024년 Stack Overflow 조사에서 개발자가 가장 사랑하는 언어 4위에 올랐고, 대부분의 모던 프론트엔드 프로젝트에서 사실상 표준으로 자리잡았습니다.
왜 TypeScript를 써야 할까?
1. 버그를 미리 잡는다
JavaScript에서 흔히 발생하는 "undefined is not a function", "Cannot read property of null" 같은 런타임 에러를 TypeScript는 코드 작성 시점에 잡아줍니다. 프로덕션이 아닌 개발 단계에서 에러를 발견하면 디버깅 시간을 대폭 줄일 수 있습니다.
2. 자동완성이 강력해진다
타입이 정의되어 있으면 에디터(VS Code)가 정확한 자동완성을 제공합니다. 객체에 어떤 속성이 있는지, 함수에 어떤 파라미터를 넘겨야 하는지 일일이 문서를 찾지 않아도 됩니다.
3. 리팩토링이 안전해진다
함수 시그니처를 변경하면 TypeScript가 해당 함수를 사용하는 모든 곳에서 에러를 표시합니다. 대규모 코드베이스에서 안심하고 리팩토링할 수 있습니다.
기본 타입
TypeScript의 기본 타입으로는 string(문자열), number(숫자), boolean(참/거짓)이 있습니다. 배열은 string[]이나 number[] 형태로 선언합니다. 객체는 type이나 interface 키워드로 형태를 정의할 수 있으며, 물음표(?)를 붙여 선택적 속성을 만들 수 있습니다.
Interface vs Type
둘 다 객체의 형태를 정의하는 데 사용됩니다. Interface는 확장(extends)이 자유롭고, Type은 유니언 타입("loading" | "success" | "error" 같은 형태) 등 더 유연한 표현이 가능합니다. 실무에서는 객체 형태에 interface, 유니언/인터섹션에 type을 사용하는 패턴이 일반적입니다.
React에서 TypeScript 사용하기
Props 타입 정의
컴포넌트의 Props를 type으로 정의하면 잘못된 props를 넘기는 실수를 방지할 수 있습니다. label: string, onClick: () => void 같은 형태로 각 prop의 타입을 명시합니다.
useState 타입
useState에 제네릭을 사용하여 상태의 타입을 지정합니다. useState<number>(0), useState<User | null>(null) 같은 형태입니다.
이벤트 타입
React의 이벤트 핸들러에는 React.ChangeEvent<HTMLInputElement>, React.FormEvent<HTMLFormElement> 같은 타입을 사용합니다.
제네릭 (Generics)
재사용 가능한 컴포넌트나 함수를 만들 때 사용합니다. 타입을 파라미터처럼 전달할 수 있어, 하나의 함수로 여러 타입을 처리할 수 있습니다.
유틸리티 타입
TypeScript가 기본 제공하는 유용한 타입들: Partial<T>(모든 속성 선택적), Required<T>(모든 속성 필수), Pick<T, K>(특정 속성만 선택), Omit<T, K>(특정 속성 제외), Record<K, V>(키-값 쌍 정의).
실전 팁
- any를 피하세요 — any는 타입 체크를 무력화합니다. 정말 모르겠으면 unknown을 사용하세요.
- 타입 추론을 활용하세요 — 명백한 경우에는 타입을 생략해도 됩니다.
- strict 모드를 켜세요 — tsconfig.json에서 strict: true를 설정하면 더 안전한 코드를 작성할 수 있습니다.
TypeScript를 직접 연습해보고 싶다면 Compit의 TypeScript 챌린지에 도전해보세요!