타입스크립트에서 const / let 을 컴파일하면 결과로 var가 나오는 이유

 

 

타입스크립트를 호기심에 써보거나 플레이그라운드에서 잠깐씩 써보다가

npm으로 설치를 하고 사용하려 하면 마주칠 수 있는 문제가 있다. 바로 컴파일시 나오는 결과다.

실제로 내가 프로젝트에 타입스크립트를 적용해 보려고 하면서 마주친 문제였고, 너무 당황스러웠던 기억이 있다. 

 

다음과 같은 코드를 타입스크립트에 작성하여서 컴파일 해 보면 어떻게 될까?

터미널에 다음과 같이 치면 컴파일 해준다. 

타입스크립트를 컴파일한 js 파일이 생성 되었고 이 곳에 들어가보면...

 

?????

처음엔 너무 당황스러웠다. var는 지양한다고 배웠는데 var로 바뀐다니. 

그냥 쓰는건 아닌 것 같아서 이유를 찾아보게 되었다. 

이렇게 이유는TypeScript 컴파일 타겟 자바스크립트 기본 버전이 ES3이기 때문이다.

 

 

만약, 자바스크립트 버전을 변경하려면 컴파일 옵션에 --target 또는 -t를 사용한다. 
현재 tsc가 지원하는 자바스크립트 버전은 
‘ES3’(default), ‘ES5’, ‘ES2015’, ‘ES2016’, ‘ES2017’, ‘ES2018’, ‘ES2019’, ‘ESNEXT’이다.
예를 들어, ES6 버전으로 트랜스파일링을 실행하려면 아래와 같이 옵션을 추가한다.

출처: https://poiemaweb.com/

 

이렇게 타켓 버전을 설정하면 해당 버전으로 컴파일 해 준다. 

그럼 매번 이렇게 설정을 해 줘야 하는가... 아니다. 

 

$ tsc --init

tsc 설정을 통해서 tsconfig 파일을 생성해준다. 

 

tsconfig 파일에 들어가면 타켓을 설정할 수 있다. 타켓을 설정한 뒤 터미널에서 tsc를 쓰면 지정한 버전으로 자동 컴파일 해준다. 다만 주의할 점은 tsc 뒤에 파일 명을 쓰면  tsconfig.json이 무시되므로 주의해야한다. 

 

 

 

 

자세한 글을 보려면 

https://poiemaweb.com/typescript-introduction 이 곳을 참고하면 좋을 것 같다.