TypeScript 타입 시스템 기초

TypeScript를 실제로 적용하는 절차와 기본 타입 문법을 정리한 입문 가이드다. 브라우저는 `.ts` 확장자 파일을 직접 인식하지 못하기 때문에, `npm install -g typescript`로 전역 설치한 뒤 `tsc --init`으로 컴파일러 옵션을 담은 `tsconfig.json`을 생성하고, 작성한 `.ts` 파일을 `tsc` 명령으로 `.js`로 컴파일해 HTML에 적용하는 과정을 거쳐야 한다. 이 컴파일 과정 자체가 타입스크립트 도입의 핵심 진입 장벽이며, 실무에서는 번들러 등을 통해 이 과정을 자동화한다.

기본 타입은 불리언(`boolean`), 숫자(`number`), 배열(`타입[]`), `null`, `undefined`, `void`, `any` 등으로 구성된다. 이 중 `any`는 어떤 타입이든 허용해 타입 체크를 무력화시키므로, 라이브러리 반환값의 타입을 알 수 없는 경우처럼 불가피할 때만 제한적으로 쓰고 최대한 사용을 자제할 것을 권장한다. 타입은 변수 선언, 함수 매개변수, 함수의 반환값 세 곳에 지정할 수 있으며, 선언한 타입과 다른 값이 들어오면 컴파일 시점에 에러가 발생해 디버깅을 수월하게 해준다.

인터페이스(Interface)는 값이 가져야 할 형태(shape)를 미리 정의하는 일종의 '계약서'다. 예컨대 이름·색상·개수 속성을 갖는 `Fruit` 인터페이스를 정의하면, 이 형태를 매개변수로 받는 함수는 계약된 속성이 하나라도 빠진 객체가 들어올 경우 에러를 발생시켜 실수로 필수 값이 누락되는 것을 방지한다. 타입과 인터페이스는 둘 다 "타입을 체크한다"는 역할은 같지만, 인터페이스는 객체가 어떤 형태로 생겼는지를 정의하는 데 더 초점을 맞춘다.

여러 파일에서 공통으로 쓰이는 타입은 개별 파일마다 중복 선언하지 않고 `type.ts`처럼 별도 파일에 모아 정의한 뒤 `import`/`export` 문법으로 필요한 곳에서 불러써 관리 효율을 높이는 방식이 권장된다. 이는 이후 React 등 프레임워크와 결합할 때 Props 타입을 별도 `interface`로 분리해 관리하는 패턴(React TypeScript 패턴)과 같은 맥락의 관행이다.

핵심 내용

브라우저는 `.ts`를 직접 실행 못함 → `tsc`로 `.js` 컴파일 후 적용
`tsc --init`으로 `tsconfig.json` 생성, 컴파일러 옵션 설정
기본 타입: `boolean`, `number`, 배열(`타입[]`), `null`, `undefined`, `void`, `any`
`any`는 타입 체크를 무력화하므로 최대한 사용 자제 권장
타입은 변수·매개변수·반환값 세 곳에 지정 가능
`interface`는 객체의 형태(shape)를 계약처럼 정의해 필수 속성 누락을 방지
공통 타입은 별도 파일(`type.ts`)에 모아 `import`/`export`로 관리

출처

Typescript 알아보기 2편 — 2021-10-12, hyejun.lee

TypeScript 타입 시스템 기초

핵심 내용

관련 개념

출처