TypeScript를 처음 배우며 정리한 노트

왜 TypeScript인가

JavaScript는 동적 타입 언어라 런타임에서야 타입 에러를 발견한다. TypeScript는 정적 타입을 추가해서 코드 작성 시점에 에러를 잡아준다. 규모가 커질수록 이 차이가 극명해진다.

에디터의 자동완성과 리팩토링 지원도 훨씬 좋아진다. "이 변수에 뭐가 들어있지?"를 항상 추론할 필요 없이 타입이 알려주니까.

기본 타입

• string, number, boolean - 원시 타입
• array - number[] 또는 Array<number>
• tuple - 고정 길이·타입 배열: [string, number]
• enum - 이름이 있는 상수 집합
• any - 타입 검사 비활성화 (가급적 사용 지양)
• unknown - any의 안전한 대안, 타입 좁히기 필요
• void, never - 반환값 없음 / 절대 반환하지 않음

Interface와 Type

객체의 형태를 정의하는 두 가지 방법이다.

Interface는 extends로 확장 가능하고 같은 이름으로 선언하면 자동 병합된다.Type은 유니온(|), 인터섹션(&) 등 더 유연한 조합이 가능하다.

일반적으로 객체 형태 정의에는 interface, 유니온이나 복잡한 타입 조합에는 type을 사용하는 편이다.

제네릭 (Generics)

제네릭은 타입을 매개변수로 받아서 재사용 가능한 코드를 만든다. 함수, 인터페이스, 클래스 등에 적용할 수 있다.

예를 들어 function identity<T>(arg: T): T는 어떤 타입이든 받아서 그대로 반환하는 함수다. React에서도 useState<number>(0) 처럼 제네릭을 자주 사용한다.

유틸리티 타입

TypeScript는 편리한 타입 변환 도구들을 기본으로 제공한다.

• Partial<T> - 모든 속성을 선택적으로
• Required<T> - 모든 속성을 필수로
• Pick<T, K> - 특정 속성만 선택
• Omit<T, K> - 특정 속성을 제외
• Record<K, V> - 키-값 쌍의 타입 정의

이 유틸리티 타입들을 잘 활용하면 중복 타입 정의가 크게 줄어든다.

정리하며

TypeScript는 처음에 "JavaScript에 타입만 추가된 것"이라 생각했는데, 제네릭이나 유틸리티 타입까지 오니 꽤 깊은 타입 시스템이었다. 하지만 기본기만 갖추면 React 프로젝트에서 바로 써볼 수 있으니, EUTCHA 프로젝트에서 실전 적용하면서 더 익혀볼 예정이다.