타입스크립트 tsconfig.json 파일 컴파일러 옵션 정리

tsconfig.json 파일 생성 명령어

tsc --init

감시 모드 명령어

tsc --watch

ts 파일을 저장할 때마다 js 파일로 자동 컴파일해주는 옵션이다.

tsc -w 해당 파일명.ts

지정된 ts 파일만 감시한다.

tsconfig.json 파일 컴파일러 주요 옵션

tsc --init으로 tsconfig.json 파일을 생성하면 100줄 넘는 주석 처리된 옵션이 나타난다.
수 많은 옵션 중에서 기본적으로 설치하는 옵션들을 정리해본다.

{
  "compilerOptions": {

    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
    "strict": true /* Enable all strict type-checking options. */,
    "noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
    "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
    "target": "es2015" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
  },
  "include": ["src"],
  "exclude": ["src/dontTouch.ts", "node_modules"]
}

• "esModuleInterop": true ES6 모듈 사양을 준수하여 CommonJS 모듈을 가져올 수 있게 됨

• "strict": true 엄격한 타입 검사 옵션을 모두 활성화 (noImplicitAny, stricktNullChecks 등이 포함됨)
  
  

• "outDir": "./dist" 컴파일한 js 파일을 dist 폴더에 저장해줌

• "target": "es2015" 컴파일할 js 파일의 문법을 결정함 (es2015(=es6)부터 화살표 함수 등 문법의 큰 변화가 있었음)
  -> ts 파일은 src 폴더에, js 파일은 dist 파일에 나눠서 저장함.
  
  

• "include": ["src"] js로 컴파일할 ts 파일의 경로를 지정하는 곳 (["src"]로 지정되어 있으면 src 안의 모든 ts 파일을 컴파일하겠다는 뜻)

• "exclude": ["src/dontTouch.ts", "node_modules"] 컴파일을 제외할 파일 목록. src/를 포함하여 지정해야 함.
  -> 기본적으로 tsc 명령어는 모든 ts 파일을 컴파일함. include와 exclude 옵션으로 컴파일할 파일과 제외할 파일을 지정하는 것
  -> include와 exclude 옵션은 compileOptions 하위의 옵션이 아니라 동등한 위치에 있으므로 json 파일 작성할 때 주의해야 함.