컴파일러 옵션 설정

CompilerOption

TypeScript는 우리가 작성한 코드에 타입 오류가 없는지 검사한 후 JavaScript 코드로 변환해준다.

이렇게 컴파일에 관한 세부적인 사항을 컴파일러 옵션이라고 한다.

 

우선, 컴파일러 옵션을 설정할 수 있는 파일을 생성해보자.

tsc --init

위 명령어를 입력하면 tsconfig.json 파일이 생성된다.

include

tsc에게 컴파일 할 TypeScript 파일의 범위와 위치를 알려주는 옵션이다.

여러 개의 파일이 있을 때, 각각의 파일을 일일히 JavaScript 파일로 변환하기엔 무리일 것이다.

{
  "include": ["src"]
}

위와 같이 설정할 경우 tsc 명령어만 입력해도 src 폴더 내 모든 파일이 동시에 컴파일되어 JavaScript 파일로 변환된다.

target

컴파일 결과 생성되는 JavaScript 코드의 버전을 설정하는 옵션이다.

{
  "compilerOptions": {
    "target": "ES5"
  },
}

 ts 파일에 ES6에서 사용되는 문법인 화살표 함수를 작성 후 컴파일 해보자.

ES5의 문법으로 변환되어 컴파일 된 것을 확인할 수 있다.

module

변환되는 JavaScript 코드의 모듈 시스템을 설정하는 옵션이다.

{
  "compilerOptions": {
    "module": "CommonJS"
  },
}

ESM 문법인 import와 export를 사용한 후 컴파일 해보자.

CJS 문법인 require과 exports로 변경된 것을 확인할 수 있다.

outDir

컴파일 결과를 생성할 JavaScript 코드의 위치를 결정하는 옵션

{
  "compilerOptions": {
    "outDir": "dist"
  },
}

컴파일 시 dist 폴더에 생성되는 것을 확인할 수 있다.

moduleDetection

타입스크립트의 모든 파일은 기본적으로 전역 파일로 취급된다.

따라서 위처럼 동일한 이름의 변수를 선언할 시 블록 스코프에서 'a'라는 변수를 재정의할 수 없다는 오류가 나타난다.

이럴 경우 각 파일에 모듈 시스템 키워드인 export나 imoprt를 최소 하나 이상 사용해 해당 파일을 독립 모듈로 읽힐 수 있도록 해야 하는데

이를 자동화하는 옵션이다.

{
  "compilerOptions": {
    "moduleDetection": "force"
  },
}

위처럼 설정하면

자동으로 모듈 시스템 키워드가 적용된 채로 컴파일된 것을 확인할 수 있다.

 

다른 옵션들은 아래 사이트에서 참고하자.

TSConfig Reference - Docs on every TSConfig option

 

출처 : 한 입 크기로 잘라먹는 타입스크립트(TypeScript) - 이정환 winterlood