TypeScript 타입 시스템 기초

TypeScript는 자바스크립트에 타입을 붙인 언어로, 이름 그대로 "타입 + (자바)스크립트"의 합성어다. 마이크로소프트가 자바스크립트에 없던 전통적 객체지향 타입 시스템을 도입하기 위해 만들었으며, 자바스크립트의 슈퍼셋(superset) 언어로서 es6 최신 문법까지 포함한다. 자바스크립트가 런타임에 자료형을 정하는 동적 언어여서 실행 중에야 타입 오류가 드러나는 반면, 타입스크립트는 컴파일 시점에 자료형을 정하는 정적 언어여서 자바스크립트로 컴파일하는 과정이 추가로 필요한 대신 그 컴파일 단계에서 미리 오류를 잡아낼 수 있어 유지보수에 유리하다. 기존 `.js` 프로젝트를 그대로 둔 채 파일 단위로 점진적으로 `.ts`로 전환할 수 있다는 점도 실무 도입 장벽을 낮추는 요인이다. 다만 타입 관련 코드를 추가로 작성해야 하는 부담이 있고, 어떤 타입이든 허용하는 `any`를 남용하면 타입 체크가 무력화돼 타입스크립트 도입의 이점이 희석된다는 점은 대표적인 단점으로 꼽힌다.

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 패턴)과 같은 맥락의 관행이다.

핵심 내용

TypeScript = 타입 + JavaScript: 자바스크립트의 슈퍼셋 언어, es6 문법 포함
자바스크립트(동적 언어, 런타임에 타입 결정) vs 타입스크립트(정적 언어, 컴파일 시점에 타입 결정)
컴파일 단계에서 타입 오류를 미리 잡아내 유지보수성 향상, 기존 `.js`를 그대로 두고 점진적 도입 가능
단점: 타입 관련 코드 추가 작성 부담, `any` 남용 시 타입 체크 이점 희석
브라우저는 `.ts`를 직접 실행 못함 → `tsc`로 `.js` 컴파일 후 적용
`tsc --init`으로 `tsconfig.json` 생성, 컴파일러 옵션 설정
기본 타입: `boolean`, `number`, 배열(`타입[]`), `null`, `undefined`, `void`, `any`
`any`는 타입 체크를 무력화하므로 최대한 사용 자제 권장
타입은 변수·매개변수·반환값 세 곳에 지정 가능
`interface`는 객체의 형태(shape)를 계약처럼 정의해 필수 속성 누락을 방지
공통 타입은 별도 파일(`type.ts`)에 모아 `import`/`export`로 관리

출처

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

TypeScript 타입 시스템 기초

핵심 내용

관련 개념

출처