[TypeScript] 컴파일러

평소 그냥 기본 컴파일러 설정을 이용해서 코드를 작성했지만 보다 컴파일러 작동원리가 궁금해 설정값에 대해 알아보고 앞으로 사용할만한 옵션들에 대해서 정리해 보았습니다.

컴파일러 명령어

- tsc -w

• watch 모드가 작동 됩니다.
• 소스 코드에 변경 사항이 있을 때마다 자동으로 컴파일 됩니다.

tsc --init

• 컴파일러의 설정 파일인 tsconfig.json이 생성 됩니다.
• tsconfig.json 파일의 옵션은 기본적으로 수정하지 않고 프로젝트를 진행 할 수 있지만 그 중 몇몇 기능에 사용되는 옵션들이 있습니다.

target :컴파일할 자바스크립트 버전을 설정

• ex) es5, es6 등

lib : dom으로 작업을 수행하는 항목, 기본 객체, 기능 등 타입스크립트 노드를 설정

• ex) document, querySelector, 이벤트 리스너 등 dom API 사용이 가능합니다.

 // 별도로 작성하지 않으면 아래의 설정과 같다.
 ...
"lib" : [
    "dom",
    "es6" 
    "dome.iterable"
    "scripthost"
],
...

tsconfig 파일의 컴파일러 옵션

타입스크립트 컴파일러의 옵션을 변경을 통해 다양한 기능을 추가하게나 제거할 수 있습니다. 다음 옵션들은 알아두면 유용한 옵션들입니다.

• allowJS, checkJs : 설정할 경우 .ts 파일 이외에 .js 파일도 컴파일이 가능합니다.
• sourceMap : 디버깅에 유용하며, true 값을 주면 .js.map 파일이 생성됩니다. 이 파일을 통해서 브라우저의 개발자 도구 Source 탭에서 .ts 파일을 확인하고 디버깅이 가능합니다.
• outDir : 기본적으로 dist 폴더는 모든 출력 값을 보관하고 src 폴더에 ts 파일 보관합니다. outDir를 사용해서 컴파일 된 파일이 저장되는 위치 지정이 가능합니다.
  ex) "outDir" : "./dist"
• rootDir : 입력되는 ts 파일의 경로를 지정합니다.
• removeComments : true 값이면, 컴파일된 js 파일의 주석이 모두 제거됩니다.
• noEmit : true 값이면 출력 파일을 작성하지 않습니다.
• downlevelIteration : js 파일을 컴파일하고 for 루프를 사용한 경우 컴파일이 잘 되지 않는 경우가 있는데 이 옵션을 통해 정확하게 컴파일이 가능합니다.
  • 코드량이 많아 지므로nop 코드에 루프가 존재하고 생성된 코드가 해당 루프와 다르게 작동하는 경우에만 사용하는 것이 좋습니다.
• noEmitOnError : 기본값은 false이며 true로 설정할 경우 에러가 발생 했을 떄, 컴파일된 파일을 생성하지 않습니다.

• strict 옵션을 true로 사용하면 strict 관련 옵션을 모두 true로 설정한 것과 같은 효과가 있습니다. 세세한 옵션 조절이 필요한 경우가 아니라면 strict 옵션만 사용하는 것도 방법입니다.
  • noImplicitAny : 매개변수와 값의 타입을 명확하게 합니다. false로 지정할 경우 별도 타입을 명시하지 않아도 에러가 발생하지 않습니다.
  • strictNullChecks : 잠재적으로 null 값이 생길 수 있는 경우를 체크합니다.
  • strictFunctionTypes : 매개변수화 반환 값에 대한 함수 타입에 대한 설정입니다. 기본적으로 호출하려는 함수가 bind, call, apply 중 무엇에 해당하는지 확인하고 제대로 입력되었는지 확인합니다.

특정 파일 컴파일 제외 시키기

tsconfig.json 파일에 다음과 같이 작성하면 특정 파일을 제외하고 컴파일 하며, 기존에 있던 anlalystics.js 파일도 삭제합니다.
node_modules 내부에 있는 파일을 컴파일 대상에서 제외 시킨다.(하지만 사실, 아무것도 작성하지 않아도 node_modules는 기본적으로 제외 된다.)
node_modules 내부의 파일을 컴파일 할경 우 프로그램이 망가질 수 있습니다.

exclude와 반대로 컴파일하고자 하는 대상을 include로 설정할 수 있습니다.

 ...
},
"exclude" : [
    "anlalystics.ts",
    "node_modules" 
]
}
...

Reference

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
https://www.typescriptlang.org/docs/handbook/compiler-options.html