[TS] Typescript 컴파일러

본 포스팅은 Maximilian Schwarzmüller 님의 강의를 바탕으로 작성되었습니다.

 

watch mode

타입스크립트가 파일을 관찰하고 파일에 변경 사항이 있을 때마다 다시 컴파일하게 된다.

tsc {파일명.확장자명} --watch

--watch 말고 -w 라고 입력해도 된다.

watch mode를 활성화 시키면, 저장할 때마다 리컴파일한 자바스크립트도 디스크에 저장된다.

주의할 점 : 개발중에 watch모드를 나가지(quit) 마라. 꼭 CTRL + C 를 통해서 나가라.

 

tsc --init

tsc --init을 터미널에 입력하게 되면 해당 프로젝트(디렉토리)를 타입스크립트가 관리한다. tsconfig.json 파일이 생성되며, 해당 json파일은 타입스크립트가 관리해야 하는 이 파일이 포함된 프로젝트와 이 폴더의 모든 하위 폴더를 참고하기 위한 파일이다.

수 많은 옵션들이 있으며, 대부분 주석이 달려있다. 주석을 참고하여 해당 옵션의 내용을 확인할 수 있다.

 

이제 우리는 tsc 명령어만 입력해도 모든 타입스크립트 파일을 컴파일한다.

tsc만 입력해도 컴파일이 진행

두개의 ts파일이 컴파일됐다.

이 환경에서 watch 모드를 활성화 시켜보자. tsc --init으로 인해 모든 ts파일이 관리되며, watch 모드로 인해서 ts파일이 변경될 때 마다 타입스크립트가 변경된 파일을 컴파일 할 수 있게된다.

 

tsconfig.json - exclude

타입스크립트 관리 파일인 tsconfig.json의 "compilerOptions" 다음에 "exclude" 옵션을 추가하여 컴파일에서 제외시킬 ts파일을 명시할 수 있다.

우리는 여기서 node_modules를 제외시킨다. node_modules는 package.json에 종속되어있는 라이브러리 폴더이다. 만약, 해당 폴더의 라이브러리들 중 일부가 타입스크립트 코드를 제공하는 경우 당연히 컴파일 돼서는 안되기 때문에 예외 처리를 해준다. 여기서 고민해야할 점이, 기본적으로 default 값으로 node_modules 파일을 예외처리 한다. 하지만 만약 "exclude" 옵션을 사용하게 되면, 꼭 명시적으로 node_modules를 예외처리 해야한다.

 

tsconfig.json - include

예외와 반대로, 컴파일 해야하는 파일을 명시한다. 만약 exclude를 사용하지 않고, include 옵션에 하나의 ts파일만 명시하면 해당 파일만 컴파일 된다.

 

tsconfig.json - files

include는 폴더를 지정할수 있고, files는 각각의 파일 단위로 명시한다. 이 옵션은 규모가 작은 프로젝트에 사용하면 된다.

 

 

만약 exclude와 include 옵션을 사용하게 되면, exlude 옵션을 먼저 제외한 후 include파일(폴더)을 컴파일한다.

 

tsconfig.json - compilerOptions - target

타입스크립트 파일을 어떤 버전의 js 파일로 컴파일 할 지 결정한다. 이것은, 구버전의 브라우저에도 호환 가능한 코드를 작성할 수 있기 때문에 타입스크립트의 강점으로 생각할 수 있다. 최신의 버전으로 할 수록 코드는 더 간결해진다. 하지만 구버전의 브라우저와 호환이 안될 수 있기 때문에 명심해야한다.

 

tsconfig.json - compilerOptions - lib

해당 옵션이 주석처리 되어있으면 기본 값이 적용된다. 하지만, 주석을 해제하게 된다면 기본 라이브러리 할당이 해제되어 타입스크립트는 자바스크립트 기본 라이브러리를 인식하지 못하고 에러를 발생시킨다.

lib옵션의 주석을 해제하니 document를 인식하지 못하게 된 타입스크립트.

document를 인식하게 만들기 위해서는 lib에 "DOM" 요소를 추가한다.

이 식별자는 타입스크립트가 이해할 수 있으며 모든 domAPI를 타입스크립트에서 사용할 수 있게 해준다.

다음의 옵션 설정은 target을 es6로 설정했을 때의 lib 기본 설정값과 같다. 즉, 주석처리 한 것과 같다.

 

tsconfig.json - compilerOptions - sourceMap

디버깅을 하는데 유용한 툴이다. 브라우저에서 개발자 도구를 보면 "source"라는 카테고리가 있는데, sourceMap을 활성화시키면 개발자도구에서 ts 파일을 확인할 수 있다. 이는, 해당 ts파일에 중단점을 둘 수 있다는 것을 의미한다. 대신 .map 파일이 생성되기 때문에 단순한 작업일 경우 해당 옵션을 켜둘 필요는 없다.

 

tsconfig.json - compilerOptions - rootDir, outDir

프로젝트가 커직수록 파일을 제대로 정리해야 한다. 기본적으로 root level project 폴더에는 파일을 넣지 않는다.

src폴더와 dist폴더를 더 자주 사용한다.

dist폴더는 모든 출력값을 보관하는 작업을 수행한다. 모든 자바스크립트 파일과 src폴더에 모든 타입스크립트 파일이 보관되므로 타입스크립트 파일을 src 폴더에 옮긴다.

위 환경에서 컴파일을 해보

내가 원하는 건 이게 아닌데..

우리는 js 폴더를 dist 폴더에 저장하고 싶다. 그렇다면 outDir 옵션을 설정하자.

다시 컴파일 해볼까

아름답다

이후 html 파일의 경로도 수정하자. 이로써 프로젝트 구조가 더 깔끔해졋음을 알 수 있다. 이쁘네

또한 구조가 그대로 복사된다. 이것이 어떤것을 의미하는지 다음 그림을 확인해보자.

위와 같이 src 폴더에 analytics라는 하위 폴더를 만들고, 안에 ts 파일을 넣어서 컴파일을 실행했다.

outDir에도 똑같은 구조로 js 파일이 생성된 것을 확인할 수 있다.

 

하지만, src 폴더가 아닌 다른 폴더에서 ts 파일을 작성하여 컴파일 하게 되면 어떻게 될까..

타입스크립트는 해당 파일이 있는 전체를 인식하고 있기 떄문에 src폴더와 user폴더구조를 생성하는 것을 확인할 수 있다. 우리는 src폴더의 파일만 dist폴더로 컴파일 하고싶다.. 마치 include 속성같네. rootDir 옵션을 설정해보자.

user폴더를 확인하자

위 그림과 같이 rootDir로 설정되어있지 않은 ussr 폴더는 dist에 출력된 js파일을 저장하지 않고, 해당 폴더에 생성되는 것을 확인할 수 있다.

이렇게 rootDir과 outDir을 모두 사용하여 입력 파일(ts)이 있는 위치와 출력 파일(js)이 생성될 위치에 대해 명확하게 설정해야 한다.

 

tsconfig.json - compilerOptions - removeComments

이 옵션을 설정하면 타입스크립트 파일의 모든 주석이 컴파일된 자바스크립트 파일에서 제거된다.

이는 파일 크기를 줄이는데 도움이 될 수 있다.

 

tsconfig.json - compilerOptions - downlevelIteration

코드를 이전 버전의 자바스크립트로 컴파일하고 for 루프로 작업한 다음 드물지만 컴파일이 제대로 작동하지 않은 경우가 있다. 이런 경우에만 해당 옵션을 켜서 보다 정확하게 컴파일 할 수 있도록 한다.

 

tsconfig.json - compilerOptions - noEmitOnError

기본적으로 해당 옵션은 false로 설정된다. 타입스크립트는 에러를 알고있어도 컴파일을 실행시켜주는데 noEmitOnError옵션을 true로 설정하게되면 컴파일을 할 수 없게된다.

오류가 나는 이유는 button이 NULL일 수 있어서

컴파일이 안된다.

굉장히 엄격한 타입스크립트가 된다. 위 오류를 해결하기 위해서는 button이 꼭 존재한다는 의미로 뒤에 ! 를 붙여야한다.

오류를 해결하니 컴파일이 성공적으로 됐다.