타입스크립트 컴파일러 옵션 설정하기
컴파일러 옵션이란
타입스크립트의 컴파일은 우리가 작성한 코드에 타입 오류가 없는지 검사하고 오류가 없다면 자바스크립트 코드로 변환한다.
이러한 컴파일 과정에서 아주 세부적인 사항들 예를 들어 얼마나 엄격하게 타입 오류를 검사할 건지 또는 컴파일 결과 생성되는 자바스크립트 코드의 버전은 어떻게 할 것인지 등의 컴파일의 아주 세부적인 사항들을 컴파일러 옵션이라고 한다.
컴파일러의 옵션을 우리가 직접 설정한다는 것은 이런 사항들을 프로그래머가 자신의 입맛에 맞게 자유롭게 변경하는 행위를 말한다.
타입스크립트는 다른 언어에 비해서 컴파일러 옵션을 아주 자유롭고 쉽게 설정할 수 있는데 이렇게 자유로운 환경 설정을 제공하는 덕분에 우리가 진행하는 프로젝트의 성격에 따라 프로젝트에 최적화된 맞춤 설정을 만들어 사용할 수 있다.
컴파일러 옵션 자동 생성하기
타입스크립트의 컴파일러 옵션은 패키지 루트 폴더 아래에 tsconfig.json이라는 파일에 설정할 수 있으며 Node.js 패키지 단위로 설정된다.
컴파일러 옵션을 설정하는 가장 쉽고 빠른 방법은 자동 생성 도구를 이용하는 방법이다. tsc를 이용하면 기본 옵션이 설정된 컴파일러 옵션 파일을 자동 생성할 수 있다.
터미널에 tsc -—init을 입력하면 자동으로 기본 설정이 완료된 tsconfig.json 파일이 생성된다.
이 파일을 열어보면 굉장히 많은 옵션이 기본적으로 설정되어 있는걸로 보인다.그러나 거의 모든 옵션이 주석처리 되어 있어서 실제 적용되고 있는 옵션은 몇개 안된다.
컴파일러 옵션 직접 설정하기
하지만 타입스크립트의 컴파일러 옵션 설정법에 대해 처음부터 배워보기 위해 자동 생성된 옵션은 사용하지 않고 tsconfig.json의 모든 내용을 다 지우고 하나씩 필요한 옵션을 설정해보았다.
먼저 파일 내용을 모두 삭제하고 하나의 중괄호만 작성한다.
include 옵션
include 옵션은 tsc에게 컴파일 할 타입스크립트 파일의 범위와 위치를 알려주는 옵션이다.
이 옵션을 이용하면 다음과 같이 파일이 아주 많을 때 일일이 tsc 명령어와 함께 파일 명을 입력하지 않아도 된다.
// 100개의 파일이 존재할 경우
tsc file1.ts
tsc file2.ts
...
tsc file100.ts다음과 같이 include 옵션을 설정한다.
이렇게 설정하면 이제 tsc 명령어만 입력해도 src 폴더 아래의 모든 타입스크립트 파일이 동시에 컴파일된다.
target 옵션
target 옵션은 컴파일 결과 생성되는 자바스크립트 코드의 버전을 설정하는 옵션이다.
다음과 같이 target 옵션을 설정한다.
이제 tsc를 이용해 컴파일 하면 ES6의 문법인 화살표 함수가 ES5의 문법인 함수 표현식으로 변환된다.
target 옵션을 ESNext(최신 자바스크립트 버전)으로 설정한다면 화살표 함수로 잘 변환된다.
이렇듯 target 옵션을 이용하면 생성되는 자바스크립트 코드의 버전을 우리가 마음대로 조정할 수 있다.
module 옵션
ES 모듈 시스템 이해하기
CJS 모듈 시스템 이해하기
module 옵션은 자바스크립트 코드의 모듈 시스템을 설정하는 module 옵션이다.
다음과 같이 tsconfig.json에 module 옵션을 추가하고 값으로 CommonJS를 설정한다.
결과를 확인하면 require나 exports 등의 CommonJS 문법으로 코드가 변환된 것을 확인할 수 있다. 앞서 module 옵션을 CommonJS로 설정해 두었기 때문이다.
참고로 타입스크립트에서는 이렇게 자바스크립트의 ES 모듈 시스템과 아주 유사하게 내보낼 때에는 export 를 사용하고 불러올 때에는 import를 사용한다.
이번에는 module 옵션을 ESNext로 설정한다.
결과를 확인해보면 변환된 자바스크립트 코드가 ES 모듈시스템을 사용하는걸 확인할수 있다.
outDir
다음으로 살펴 볼 옵션은 컴파일 결과 생성할 자바스크립트 코드의 위치를 결정하는 outDir 옵션이다. tsconfig.json에 다음과 같이 설정한다.
tsc를 이용해 컴파일 하면 이제 컴파일 결과가 dist 폴더에 생성된다.
strict
strict옵션은 타입스크립트 컴파일러의 타입 검사 엄격함 수준을 정하는 옵션이다.
타입스크립트에서는 특별히 매개변수의 타입은 프로그래머가 직접 지정하도록 권장 하는 데 구체적인 이유는 나중에 다루겠지만 대략적으로만 소개하자면 타입스크립트는 함수 매개변수의 타입을 자동 추론할 수 없기 때문에 타입을 프로그래머가 직접 지정하지 않을 경우 엄격한 타입 검사 모드에서는 오류가 발생하게 된다.
이때 반대로 strict 를 끄면 엄격하지 않게 타입을 검사하기 때문에 오류가 사라지게 된다.
ModuleDetection 옵션
타입스크립트의 모든 파일은 기본적으로 전역 파일(모듈)로 취급된다.
따라서 다음과 같이 index.ts와 hello.ts 두 타입스크립트 파일을 만들고 동일한 이름의 변수를 선언하면 오류가 발생하게 된다.
이럴 때에는 각 파일에 모듈 시스템 키워드(export, import)를 최소 하나 이상 사용해 해당 파일을 전역 모듈이 아닌 로컬(독립) 모듈로 취급되도록 만들어야 한다.
이를 자동화 하는 옵션이 바로 moduleDetection 옵션이다.
ts-node 옵션
moduleDetection 옵션을 활성화 하고 타입스크립트 파일에서 모듈 시스템을 사용하게 되면 ts-node로 실행시 오류가 발생하게 된다.
이 때 다음과 같이 ts-node의 옵션을 설정하면 ts-node로 타입스크립트 모듈을 실행할 수 있게 된다.
