tsc 옵션 제대로 사용하기

타입스크립트 코드를 트랜스파일하기 위해서는 tsc 커맨드를 사용합니다.

// index.ts
const name: string = "chanmin";

$ tsc index.ts

// index.js
var name = "chanmin";

다만 위의 트랜스파일 결과물은 var 키워드를 사용하는 구버전 자바스크립트 코드입니다.

어떻게 하면 이 끔찍한 var 에서 벗어날 수 있을까요?

⚙️ tsconfig 설정

타입스크립트를 조금 잘 아는 분이시라면 tsconfig 파일에서 타겟 옵션을 지정할 수 있다는 것도 알고 계실 겁니다.

// tsconfig.json
{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    "target": "ES2016",                      
    "module": "commonjs",       
   }
}

타겟을 ES2016 이상으로 바꾸고 다시 트랜스파일을 해볼까요?

// index.ts
const name: string = "chanmin";

$ tsc index.ts

// index.js
var name = "chanmin";

하지만 결과물은 여전히 동일한 이전 자바스크립트 코드입니다.

왜 tsconfig 설정이 반영되지 않은 걸까요?

 

바로 tsc 옵션을 잘못 사용했기 때문입니다.

🛠 tsc CLI 옵션

1. tsc 를 실행하면 tsconfig 파일이 존재하는 경로부터 모든 하위 경로의 타입스크립트 코드를 tsconfig 옵션대로 트랜스파일합니다.

2. tsc (파일명) 을 실행하면 tsconfig 파일이 존재하는 경로에 파일이 존재하는지 확인한 후, 기본 컴파일러 옵션으로 트랜스파일합니다.

 

얼추 감이 오시나요?

위에서 index.ts 파일을 트랜스파일할때 tsc가 아닌 tsc index.ts 라는 명령을 사용했는데요, 바로 이 점때문에 tsconfig 설정은 무시되고 기본 컴파일러 옵션(ES2015) 으로 트랜스파일이 진행된 것입니다.

 

어렵사리 설정한 tsconfig 옵션인 만큼, 제대로 사용할 수 있도록 합시다!

🎯 요약

• 인자 없이 tsc 만으로 트랜스파일을 수행하면 tsconfig 설정이 반영되지만, tsc (파일명) 처럼 특정 파일명을 지정하면 tsconfig의 지원을 받을 수 없다.

📝 참고

타입스크립트 공식 문서 중 - www.typescriptlang.org/docs/handbook/compiler-options.html

Documentation - tsc CLI Options