Introduction

지금까지 typescript playground에서 스크립트를 작성하였지만 gulp처럼 typescript를 여러 패키지들처럼 js를 변환하고 사용해야하는 설정을 해야한다. 물론 많은 패키지가 typescript를 사용할 수 있게 알아서 변환해주는 것이 있지만 가끔 수동으로 설정해야하는 경우가 있어 배울 필요가 있다.

Targets

typescript를 컴파일하기 위해서는 tsconfig.json이 필요하다. 그리고 tsconfig에서 가장 기본적인 설정은 다음과 같다.

{
  "include": ["src"], // typescript파일이 어디서 작성되는지 경로를 입력한다.
  "compilerOptions": {
    "outDir": "build", // .ts가 .js로 변환되어 저장될 폴더 지정
    "target": "es6" // 변환된 JS버전을 설정한다.
}

**include** : typescript가 작성된 폴더 경로이다. **compilerOptions** : typescript를 compile하기전에 설정할 오브젝트이다. **outDir** : compile되고 js파일이 생성될 폴더경로이다. **target** : 변환될 JS 버전이다.

<aside> 📌 target경우는 모든 js버전을 지원하지만 공식페이진에선 es6를 권장한다. 또한 target을 지정하지 않을 경우 es3, es5버전으로 자동 compile될 것이다.

</aside>

Lib Configuration

lib는 합쳐진 라이브러리의 정의 파일을 특정해주는 역할을 한다. 즉, 코드가 동작되는 런타임 환경을 알려주는 옵션인데, C의 include나 C#의 using과 비슷한 역할을 한다고 보면된다.

{
  "compilerOptions": {
    "lib" :["es6","DOM"]
  }
}

es6는 백앤드 환경, dom은 브라우저 환경에서 코드가 쓰일것이라고 암시하는 것이며, compiler는 런타임에 필요한 함수나 다양한 옵션들을 intelliSense해준다.

정의 파일은 js 코드의 모양을 ts에 설명해주는 파일이다.

ts는 js의 기본 라이브러리를 가지고 있지만 대부분의 패키지는 js로 작성되어 있고 ts는 이걸 인지를 못한다. 하지만 ts도 여러 패키지를 인지하고 사용하는 방법이 마련되어 있다. 위에서 정의 파일은 js 코드의 모양을 ts로 설명해주는 것이라고했다. 그리고 그 설명해주는 ts가 <module>.d.ts라는 파일을 통해서 intelliSense가 동작하게 만드는 것이다.

myPackage.js라는 js module이 있다고 가정해보자. ts관점에서 js를 바라보면 무슨 타입으로 쓰여 있는지 모르는 상태가 되어 있을것이다.