[Typescript] 컴파일러 및 구성, tsconfig.json 옵션들[01]

매번 해당 ts 파일을 tsc ~~.ts 한다면 큰 프로젝트일 경우 여러 업데이트된 ts 파일을 일일이 하기 번거롭다 따라서 편의성을 위한 컴파일 기능을 설명하고자한다.

npm start 을 통해 자동으로 변경된 사항을 로컬3000에 불러온다지만 여전히 tsc 로 커맨드를 입력해야한다.

이럴때 사용하는것이 관찰(watch)모드이다.

관찰모드(Watch)

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

처음 커맨드 입력 방법은

tsc ~~.ts --watch 또는 tsc ~~.ts -w

입력하여 해당 ts파일을 관찰모드로 진입한다. 이때 끄는 방법은 기존과 똑같이 control+C 를 눌르면된다.

하지만 이러한 관찰모드역시 파일을 직접적으로 지정해야 한다는것이다. 따라서 큰 규모의 프로젝트의 경우 관찰모드를 쓰지 않는다.

tsc —init

특정 파일을 지정하지 않고 tsc —init 하게 되면 새로운 json 파일을 만드는데 이름은 tsconfig.json 이다.

이는 타입스크립트가 관리해야하는 이 파일이 포함된 프로젝트와 이 폴더의 모든 하위 폴더를 참고하기 위한 파일이다.

이제 tsc 라고 치면 모든 .ts 파일을 컴파일하므로 시간이 다소 걸릴수 있다.

tsc -w

이제 관찰 모드로 결합하기 위해서 tsc 다음 -w 를 하면 모든 ts 파일을 관찰모드로 만든다

tsconfig.json

해당 프로젝트 관리에 중요한 파일이다.

파일들을 어떻게 컴파일해야 하는지 타입스크립트에게 알려준다.

이 tsconfig.json 코드를 보면 CompilerOptions 라는 키가있고 그안에 객체로 옵들의 키값들이 들어 있다. 이걸 보기전에 이 CompilerOptions블록 끝에

추가할수있는 옵션을 알아 볼건데, 이 추가 옵션은 컴파일러나 컴파일 단계 동작에 영향을 미치지 않고 대신 어떻게 컴파일러가 이 프로젝트에서 작동하는 방식인지 결정한다.

“exclude”

예를들어 “exclude” 라는옵션을 추가하면 tsc 실행할때 컴파일시에 포함되어서는 안되는 파일을 결정할수있다. 예를들어”analytics.ts” 를 넣으면 tsc를 실행하거나 tsc -w (watch 모드)를 해도 해당 ts파일은 컴파일되지않으므로 js파일을 만들지 않는다.

또한 와일드카드를 사용하여 구현할수도 있다.

와일드카드(*)

예를들어 “analytics.dev.ts” 라는 파일이 있고 dev.ts로 끝나는 모든 파일이 컴파일 되지 않게 하고싶다면 여기에 와일드카드 문자인 별표(**)를 추가시키면 “.dev.ts” 타입스크립트는 dev.ts가 포함된 모든 파일을 무시한다.

**

만약 여기에 /까지 추가해서 “/*.dev.ts” 라고 한다면 모든 폴더에 해당하는 dev.ts 파일을 제외할수있다.

자주 사용할 설정은 node_modules을 제외시키는것이다.

이렇게하면 node_modules폴더에 있는 모든 타입스크립트 파일들을 컴파일 하지않겠다는 의미이다.

이 node_modules 폴더에는 package.json에 설치한 모든 종속성과 이 종속성들(dependencies)의 모든 종속성이 포함되어있다. 즉 변경하지 않아야할 타사 라이브러리를 가져오는 위치이다. 또한 그안에 ts 파일들이 많이 있으므로 컴파일하게 되면 계산 과정이 느려져 최악의 경우에는 프로젝트가 망가질수도있다.

그런데 exclude 옵션을 아예 지정하지 않으면 node_modules는 기본 설정상 자동으로 제외(as default setting)된다.

“include”

exclude와 반대되는 개념으로 타입스크리브에게 컴파일 과정에 포함시킬 파일을 알린다.

include를 쓰게되면 여기에 포함되지 않은 어떤것도 컴파일되지 않도록 한다.

예를들어 “app.ts”를 넣게되면 나머지 파일 예를들어 “analytics.ts” 나 “function.ts” 파일등은 컴파일 대상에서 제외된다. 따라서 include를 쓸경우 컴파일하고자 하는 모든 항목을 포함시켜야만 한다.

“files”

files 옵션은 include 옵션과 다소 비슷한데 차이점은

"include"을 사용하여 포함된 파일들은 "exclude" 속성을 사용해 필터링할 수 있습니다.그러나 "files" 속성을 명시적으로 사용하는 파일은 "exclude"에 관계없이 항상 포함됩니다."exclude" 속성에 디렉토리가 지정되지 있지 않다면 기본적으로 node_modules, bower_components, jspm_packages 그리고 <outDir>를 제외합니다.

"files" 또는 "include" 속성에 포함되어 있는 파일이 참조되는 모든 파일도 포함됩니다.비슷하게, 파일 B.ts가 또 다른 파일 A.ts에 의해 참조된다면, 참조 파일 A.ts가 "exclude" 목록에서도 지정되지 않는 한 B.ts는 제외될 수 없습니다.

compilerOptions 안의 옵션들

“target” : 어떤 자바스크립트 버전을 대상으로 코드를 컴파일할것인지 타입스크립트에게 알려준다.

만약 “es5” 라고 되어있다면 es5 버전의 자바스크립트 코드로 컴파일 하기때문에 ts파일에서 let 이나 const 를 쓰더래도 js파일로 컴파일되어 만들어지면 var 로 나온다. 왜냐하면 es5에는 let const 가 포함되어있지 않기 때문이다.

 

es5로 target지정

es2016(es6+) target 지정할경우

여기서 좋은점은 이전의 브라우저에서도 작동하는 코드를 타입스크립트를 사용하여 생성할수있다는것이다.

하지만 타입스크립트로 이런 작업을 하지않아도 된다 자바스크립트 변환을 지원하는 다른 빌드 도구들도 있기때문이다.

index.html에 버튼을 만들고 ts파일에 button 이라는 변수를 만들고 click이벤트가 발생할때 콘솔로그를 띄우도록 작성했는데, 타입스크립트에서 document.querySelector()를 쓰면 선택이 된건지 안된건지 모르기 때문에 위와같이 빨간 에러가 발생한다.

이럴때 사용하는게 맨뒤에 ‘!’ 를 붙여주면 에러가 사라진다. 느낌표! 기능은 해당 버튼이 존재하니 값이 반환될거라고 타입스크립트에게 작성자가 직접 알려주는거라고 생각하면된다.

그런데 이렇게 querySelector 함수를 쓰거나, button.addEventListener 함수를 타입스크립트에서 어떻게 알고 사용하는것인가? 라는거에서 tsconfig에 “lib” 이라는 옵션이 있는데 target설정에 따라 기본적으로 세팅을 하지않아도 default값으로 target과 관련된 라이브러리 함수를 세팅하여 만들어진다. 따라서 target에 따라 사용여부도 달라질수있는데 위의 const , let 처럼 es6에서 제공하는 map 함수경우에도 es5로 바꾸면 ts파일에서 에러메세지가 생긴다.

만약에 이 “lib” 옵션의 주석을 해제하고 [] 값을 넣으면 에러가 발생하게된다. 기본 설정이 더이상 적용되 지 않기 때문이다.

따라서 기본설정외에 직접 설정할경우는 무엇을 쓸것인지 써야한다.

예를들어 “dom”(”DOM”) 을 넣으면 자바스크립트의 모든 dom api를 타입스크립트에서 사용할수있게된다.

이렇게 es6를 넣으면 자바스크립트의es6 문법의 api를 타입스크립트가 사용할수있게 했기때문에 오른쪽처럼 빨간줄이 사라졌다.

그외에도 자바스크립트의 핵심 기능을 모두 사용하기위해 필요한 lib 은 “dom.iterable” 과 “scripthos” 이다.

이렇게 총 4가지를 설정하게되면 기존에 lib을 주석처리하여 target 기반 (es6 입력했다고 가정하면)으로 설정된것 같다.