TypeScript가 아무리 잘났어도 결국은 JavaScript다. 따라서 TypeScript는 babel로 JavaScript로 컴파일되는 과정을 수반한다. 이 때 어떻게 컴파일할 지에 대한 option이 다양한데, tsconfig 파일이 그 역할을 하게 된다.

1. Compiler Option

tsconfig파일 내에서 컴파일에 필요한 여러 option을 설정할 수 있다. option은 아주 다양하지만, 대표적으로 target, module, outDir, rootDir, allowJS, SourceMap 등이 있다. 몇 개만 살펴보자.

1) target

target에서 지정한 버전으로 TypeScript를 컴파일하게 된다. 일반적으로 'ES5', 'ES6'를 쓴다.

2) outDir

TypeScript에서 컴파일된 파일을 어떤 디렉토리에 넣을 지 경로를 설정한다.

outDir : "./build"

3) rootDir

TypeScript파일이 생성될 수 있는 최상위 디렉토리를 정하게 된다. 예를 들어

rootDir : "./src"

라고 지정하게 되면, 모든 ts파일은 src 디렉토리 안에 생성해야만 한다.

4) sourceMap

SourceMap : True는 디버깅에 유용하다.
디버깅은 브라우저에서 '개발자 도구 - source' 에서 주로 한다.이 때 확인 가능한 파일은 (실제 실행되고있는) 컴파일된 js파일이므로 직접 작성한 ts파일과 상이하다. 이는 개발자에게 혼동을 야기한다.
SourceMap은 컴파일 시 각 ts파일에 map파일을 생성하고, 이는 브라우저에서 디버그할 때 ts파일을 보며 디버깅이 가능하게 한다.

2. exclude & include

컴파일할 때, 특정 ts파일을 제외하거나 특정 ts파일만 한정지을 수 있다. exclude와 include가 그 기능을 한다.

exclude : ["./src/login.ts"], // login.ts만 제외하고 모든 ts파일 컴파일된다.
include : ["./src/shopping.ts", "./src/buy.ts"] // shopping.ts와 buy.ts만 컴파일된다.

3. Conclusion !

tsconfig 파일 내에 option들은 머리에 다 외우고 다닐 수 없다. 그래서 파일 가장 상단에 링크를 타고가서 option들을 확인해보고 나에게 필요한 것만 이용할 수 있도록 해야한다. 이 내용을 끝으로 TypeScript에 대한 기본적인 내용은 모두 한 것 같다. 프로젝트나 복습을 통해서 계속 연마하자!!