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