TypeScript 컴파일하기 (tsconfig의 이해)

TypeScript를 설치하면 tsc 명령어를 통해 ts파일을 js파일로 컴파일 할 수 있다.

tsc fileName.ts

---

1. 하나의 파일을 실시간으로 컴파일하기 (watch mode)

tsc fileName.ts -w

 

2. 다수의 파일을 실시간으로 컴파일하기

먼저 tsconfig.json 파일을 생성해야 한다. 아래와 같이 입력한다.

tsc --init

이제 파일명 없이 tsc만 입력해도 다수의 파일을 컴파일 할 수 있다.

tsc

다수의 파일을 실시간으로 컴파일 하려면, 파일명 없이 watch mode를 실행하면 된다.

tsc -w

---

3. 프로젝트 구조 정리하기

tsconfig.json의 compilerOptions 옵션들을 통해 프로젝트의 구조를 정리할 수 있다.

• outDir: 컴파일된 js파일을 저장할 위치. 기본값은 tsconfig가 있는 현재 디렉토리 (./)이다.
• rootDir: root directory 경로 설정. root directory 바깥에 ts파일이 있으면 에러 발생.

또한 complierOptions 바깥에 exclde와 include를 설정하여 컴파일 시 특정 파일을 포함하거나 제외할 수 있다.

{
  "compilerOptions": {
    //...
  },
  "exclude": ["./src/dev.ts"],
  "include": ["./src/prd.ts"]
}

---

4. 이외 유용한 컴파일러 옵션들

• incremental: 수정된 내용만 컴파일. 이전에 컴파일한 사항을 pc에 저장하므로 용량 차지함. 프로젝트 규모에 따라 결정할 것.
• target: 어떤 버전으로 컴파일 할 것인지 결정. ES5나 ES6를 많이 사용함.
• module: 컴파일 시 모듈을 어떻게 가져올 것인지 결정. node.js 프로젝트의 경우 CommonJS, 브라우저 환경이라면 ES 사용.
• allowJs, checkJs: 한 프로젝트 내에서 js와 ts가 모두 사용된다면 true로 설정.
• outFile: 여러 ts파일을 하나의 js로 컴파일
• noEmit: 컴파일 에러 여부만 체크하고 js파일은 생성하지 않음