1.2TypeScript Compilers

타입스크립트 설치

타입스크립트는 자바스크립트로 우선 한번 변환되고 컴파일된다. 타입스크립트를 터미널에서 설치하고, tsc 타입스크립트파일명 형식으로 커맨드를 입력하면 타입스크립트파일명과 같은 이름의 자바스크립트 코드로 변환되는 것을 볼 수 있다.

bash
sudo npm install -g typescript

tsconfig 파일 만들기

별도의 프레임워크 없이 타입스크립트 파일의 컴파일러 옵션을 변경하고 싶다면, tsc --init 커맨드를 터미널에서 실행해 tsconfig.json 파일을 생성할 수 있다.

이 파일은 타입스크립트에서 설정할 수 있는 모든 세팅들이 나와있는데, 대부분은 주석처리되어 있으며 기본 설정만 되어 있다.

tsconfig 파일 설정하기

수많은 세팅값들이 나와있는데, 이 중 중요한 몇가지를 살펴보자.

1. target

tsc 커맨드로 타입스크립트 코드를 자바스크립트로 옮길때, 어떤 버전의 자바스크립트 코드로 변환할지 결정한다. 예를 들어, ES2016 이전 버전으로 target을 설정하면 자바스크립트 코드는 let이나 const 대신 var로 변수를 선언한다.

2. module

import / export 관련

3. rootDir

변환할 ts 파일이 어디에 있는지 지정한다.

4. outDir

변환한 js 파일을 어디에 저장할지 설정한다.

5. strict

만약 타입을 알 수 없다면 기본적으로 any로 추론할지, 아닐지를 결정한다. 예를 들어, a + b를 하는 함수를 만들었을 때, 이 함수는 a와 b의 타입을 지정하지 않는다면 각각 any 타입으로 우선 설정할 수도 있지만 strict를 지정하면 타입이 지정되어있지 않고 추론할 수도 없으면 에러를 띄운다.

자동으로 설정되는 tsconfig 파일

요즘 많은 빌드 툴들로 시작한 프로젝트들은 기본적으로 tsconfig.json 파일을 제공한다. 정말 세부적인 설정을 조정하고 싶다면 공식 문서를 참고해서 설정할 수 있지만, 기본값은 가장 많은 사람들이 쓰고 있는 충분히 합리적인 설정값이므로 건드리지 않을 경우가 더 많을 것이다.

tsc --watch

tsc --watch 커맨드로, 꼭 빌드를 하면서 컴파일하지 않아도 코딩을 하면서 파일을 저장하면 에러를 미리 발견할 수 있다.

타입 패키지 설치하기

타입스크립트로 개발을 하다보면 아래와 같이 생긴 메시지를 종종 마주한다:

Cannot find module '~~' or its corresponding type declarations. ts(2307)

이 메시지는 3rd party library 등을 설치하고 import를 하면, 해당 import로 받아온 모듈에 대한 타입이 타입스크립트에 내장되어 있지 않다는 의미이다. 따라서 import해온 모듈의 타입들도 받아와야하는데, 보통 해당 라이브러리 제공자가 타입도 함께 제공한다. 예를 들어, 아래는 node.js의 타입들을 설치할 수 있는 명령어다.

bash
npm install --save-dev @types/node