tsconfig target
tsconfig에 보면 수 많은 옵션이 있습니다. javascript의 이해도가 부족해여 각각의 요소들을 설정하는 부분이 어려웠습니다. tsconfig에 옵션들을 통해 javascript을 공부하면 좋을 것 같아 글을 남기게 되었습니다.
target
어떤 버전의 javascript로 최종변환을 할 것인지 정하는 옵션입니다.
이를 이해하기 위해서는 ECAMScript, 브라우저 엔진 등의 개념을 알아야 합니다. 참고 글을 통해 각각 용어에 대하여 익숙해야 합니다.
javascript에는 여러 버전이 있습니다. 정확히는 ECMA스크립트에서 javascript 표준을 정하고 있고 명세를 하고 있습니다. 이는 라이브러리가 아니며 단순 문서입니다.
target에서 설정할 수 있는 ECMAScript 버전은 es3,es5,es6/es2015,es2016,es2017,es2018,es2019,es2020,es2021,es2022,esnext이 있고 기본값은 “es3” 입니다.
그래서 어느 버전을 사용해야하나요?
javascript를 실행하기 위해서는 Nodejs 또는 브라우저(브라우저 엔진)이 필요합니다. 즉 Node.js 또는 브라우저가 ECMAscript을 어디까지 지원하고 있는지를 알아야 하고테이블에서 확인 할 수 있습니다.
Version 확인
1.ECMAScript Version
현재 사용된고 있는 ECAMScript version이 나와있습니다. 해당 버전이 브라우저별로 지원하는지 확인할 수 있습니다. 5,6 또는 es2016 을 누르면 대부분의 색상으 초록색으로 많이 지원하고 있는것을 알 수 있습니다. 하지만 next를 누르면 많은 기능들이 아직 빨간색으로 지원하고 있지 않습니다. 이 도표를 통해 es2016을 타겟으로 했을 경우 대부분의 브라우저에 큰 이슈가 없는것을 확인 할 수 있습니다.
2. Javascript RunTime Enviroment
javascript는 Node.js 또는 브라우저 엔진위에서 실행이 됩니다. 브라우저별로 다른 javascript 엔진을 가지고 있는데 도표를 통해 확인 가능합니다.
3. Features
ECMAscript 에서 정의된 기능들입니다. 해당 버전에 정의된 기능들이 나열됩니다.
4. Browser Runtime 환경별 기능 지원 현황
FE112에 대한 기능지원 현황을 보여지고 있습니다. 최상단에 100%고 표시된 것을 보았을때 FE112는 2016+기능에 대하여 모든 기능을 지원하는 것을 알 수 있습니다.
5. Server Runtime 환경별 기능 지원 현황
javascript는 브라우저가 아닌 Node.js 환경에서도 실행됩니다. Node.js 기반의 환경에서 개발하기 때문에 이는 Node.js 의 버전별 ECMAScript를 지원하는 버전을 확인하는 것이 중요한데요, 18.0< version < 18.3 에서는 99% 지원한다는 것을 확인 할 수 있습니다.
주의사항
tsconfig 공식문서에서 esnext을 사용할 경우 주의를 요구하고 있습니다. 이는 절대적인 버전이 아닌 상대적인 버전이기 떄문인데요, esnext는 사용가능한 최고사양의 ECMAScript version을 뜻합니다. 이는 상황에 따라 예측하기 힘들고 업그레이드가 될 수 있으니 주의하여 사용해야 합니다.
The special ESNext value refers to the highest version your version of > TypeScript supports. This setting should be used with caution, since it doesn’t mean the same thing between different TypeScript versions and can make upgrades less predictable.