Typescript 컴파일러 옵션

컴파일러 옵션

 

tsc --init을 하게되면 tsconfig 파일이 생성되는데 여기서 컴파일 옵션을 설정해줄 수 있다.

 

target

 

기본적으로 설정되어 있는 옵션, 주석처리 되어있지 않다. 어떤 자바스크립트 버전으로 코드를 컴파일하고 싶은지 설정하는 옵션.  target을 설정함으로써 컴파일된 코드를 지원하는 브라우저를 정의한다.
es5는 모든 코드 유형이 컴파일 된다는 뜻이다. es5로 let, const 같은 키워드를 컴파일하면 js파일에서는 var로 보인다. 왜냐하면 target이 es5이고 es5 세계에서는 let과 const가 없기 때문이다.(es6로하면 let과 const를 볼 수 있다)

여기서 좋은 점은 타입스크립트로 구형 브라우저에서도 작동하는 코드를 만들 수 있다는 점이다.

추가적으로, target을 지정하지 않으면 타입스크립트는 es3로 컴파일된다.

 

 

lib

 

타입스크립트의 객체 및 기능 기본값을 지정할 수 있는 옵션(DOM으로 작업할 때 같은 경우). 설정되어 있지 않은 경우(주석처리 되어있는 경우) 기본값은 자바스크립트 target에 따라 달라진다.

예를 들어 target이 es6라면 es6부터 자바스크립트에서 전역으로 제공되는 모든 기능은 타입스크립트에서도 사용할 수 있다. 또한 DOM API를 사용할 수 있다고 가정한다. 따라서 new Map()과 같은 Map 객체라던가, document.qeurySelector등의 모든 문법을 lib 옵션을 통해 사용할 수 있다는 것이다(설정하지 않아도 기본 target 값으로 가져가기 때문이다)

 

주석을 해제하고 저장하면 에러가 뜬다(document나 console등의 값을 읽지 못한다). 기본 설정이 더 이상 없기 때문이다. 그 대신 라이브러리들을 좀 포함하라고 하는 것이다. lib에는 여러가지 옵션들이 존재하는데 이것은 "ctrl + shift"를 통해 볼 수 있고 전체적인 옵션을 확인하고 싶다면 typescript 공식 문서에서 확인 가능하다.

 

"lib": ["DOM", "es6", "DOM.Iterable", "ScriptHost"]

 

보통 이렇게 설정하면 핵심 자바스크립트 기능을 모두 사용할 수 있다. 그런데 이것들은 target을 es6로 설정하면 기본으로 설정되는 값이다. 따라서 lib을 주석 처리하고 target을 es6로 설정한 것과 주석처리를 풀고 위에 적은 코드를 넣는 것은 동일한 결과를 가져온다.

 

 

allowJs

 

컴파일에 자바스크립트 파일을 포함시키는 옵션. 즉, .ts로 끝나지 않더라도 타입스크립트는 js파일, ts파일 모두 컴파일한다.

 

 

checkJs

 

자바스크립트 파일을 컴파일 하지는 않는다. 하지만 js파일도 구문을 검사하고 잠재적인 오류를 보고한다. 

 

allowJs와 checkJs 이 두 옵션이 유용한 경우는 타입스크립트를 사용하고 싶지는 않지만 타입스크립트의 기능을 활용하고 싶은 경우이다.

 

 

jsx

 

reactJs에 도움이 될 수 있는 옵션

 

 

declaration, declarationMap

 

.d.ts 파일은 프로젝트를 다른 사람에게 라이브러리로 배포할 때 중요한 고급 개념. 매니페스트 파일. 프로젝트에 포함된 모든 타입을 설명하는 파일

 

 

sourceMap

 

디버깅과 개발에 도움이 되는 옵션. 이 옵션을 켜게 되면 개발자 도구에서 source에 자바스크립트 파일 뿐만 아니라 타입스크립트 파일까지 볼 수 있다. 또한 .js.map 파일이 생성되는데, 이는 모던 브라우저와 개발자 도구에서 자바스크립트 파일을 입력 파일에 연결하는 다리 역할을 한다.

개발자 도구 source에서 버튼을 클릭하면 타입스크립트 파일을 선택한 후 타입스크립트의 원하는 라인을 멈출 수 있는데 이를 이용하면 디버깅하는데 매우 편리하다. 왜냐하면 자바스크립트 파일이 아니라 타입스크립트 파일, 즉 input 파일에서 직접 작업할 수 있기 때문이다.

 

 

outDir, rootDir

 

일반적으로 프로젝트에서는 같은 디렉토리에 src 폴더와 dist 폴더가 있다. dist 폴더에는 컴파일된 자바스크립트 파일들과 같은 출력물들이 들어 있다. src 폴더에는 타입스크립트 파일들이 들어있다.

타입스크립트 파일을 src 폴더로 이동할 수 있다. 자바스크립트 폴더를 삭제하면, 전부 컴파일했을 때 타입스크립트 파일도 컴파일 된다는 문제가 있다. 왜냐하면 타입스크립트의 경우 컴파일러가 하위 폴더를 살펴보기는 하지만, 출력은 입력파일 옆에 있기 때문이다(타입스크립 파일을 src폴더로 이동시켰기 때문에 입력 파일과 출력 파일이 한 파일 내에 붙어 있게 된다). 이는 outDir로 제어할 수 있다.

outDir를 설정하면, 타입스크립트 컴파일러에게 생성된 파일을 어디에 저장해야 하는지 알려줄 수 있다. 이걸 dist로 설정할 수 있다.

 

"outDir": "./dist"

 

이렇게 하고 터미널에서 tsc를 입력하면 자바스크립트 파일이 src 폴더가 아닌 dist 폴더에 있는 것을 확인할 수 있다. 그러면 index.html 파일에서 연결할 js 파일을 dist/app.js 및 dist/analytics로 변경해주기만 하면 된다. 그러면 애플리케이션은 여전히 잘 작동하고 프로젝트 구조는 더 깔끔해진다. 

폴더의 형태로 관리되고 있을 경우 동일한 형태로 복사해준다.

 

루트 디렉토리를 설정하고, 파일이 저장된 폴더를 구체적으로 설정할 수도 있다. 현재 파일에서는 src이다. 이로써 타입스크립트 컴파일러가 다른 폴더에서 찾지 않게 할 수 있다. 물론, 앞서 설명했던 include옵션으로도 할 수 있지만 루트 디렉토리를 사용하면 타입스크립트 컴파일러가 해당 src 폴더만 보지 않는다. 우리가 설정한 프로젝트 구조가 dist 폴더에 보관되어 있는지 확인한다.

 

rootDir을 src 폴더로 해놓으면 타입스크립트 파일이 있는 폴더가 루트 레벨에 있더라도 출력에 포함되지 않고 src 폴더가 dist폴더 하위에 새로 생성되는 일도 없어진다(rootDir을 주석 처리 해놓은 상태에서 루트 디렉토리에 타입스크립트 폴더 / 파일이 존재할 경우는 src 폴더까지 dist 폴더에 복사된다)

 

즉, rootDir, outDir 모두 입력 파일이 어디에 있는지, 출력 파일이 어디에 생성되는지 설정하는 것이다.

 

 

removeComments: true

 

타입스크립트 파일에 있는 모든 주석이 제거되고 컴파일된 자바스크립트 파일만 남는다. 즉, ts파일에는 주석이 있지만 js 파일에는 주석이 없는채로 출력된다.

 

 

noEmit : true

 

자바스크립트 파일을 생성하지 않는 옵션. 타입스크립트 파일이 올바른지 확인만 하고 싶고 모두 출력하고 싶지 않은 경우에 주로 사용한다. 따라서 큰 프로젝트에서 주로 사용되는 옵션이다)

 

 

downlevelIteration

 

이전 버전의 자바스크립트로 코드를 컴파일하고 for 루프를 사용하는 경우, 드물게 컴파일이 제대로 안되는 문제가 생기기도 한다. 이 옵션을 켜면 그런 경우에 더 정확히 컴파일된다. 그렇다면 항상 켜놓는게 좋지 않을까 라는 생각을 가질 수 있는데, 그렇게 되면 더 장황한 코드가 출력되게 된다. 따라서 루프가 있고 생성된 코드에서 루프가 예상과는 다른 방식으로 작동될 때만 켜는 것이 좋다.

 

 

noEmitOnError : false

 

기본값은 false이다. true로 설정하게 되면 문제가 있는 파일(에러가 있는 파일)은 생성되지 않는다. 컴파일에서 오류가 뜨면 파일이 생성되지 않는다는 말이다. 따라서 이 오류를 해결해야만 타입스크립트가 다시 파일을 컴파일 할 수 있다.

 

 

strict

 

모든 strict 타입 검사 옵션이 활성화된다. 이렇게 되면 모든 옵션을 개별적으로 설정하는 것과 같아진다. 따라서 strict 하위에 적혀있는 주석들을 모두 주석 해제하거나 strict옵션을 true로 설정해 놓는 것은 같은 의미이다.

strict 옵션에 대해서는 위에 적은 것 만큼이나 설명할 부분이 많기 때문에 다른 게시물에서 다룰 예정이다.