[Typescript] tsconfig.json 옵션들[02]

“allowJs”

allowJs는 checkJs와 함께 타입스크립트가 자바스크립트 파일을 컴파일할수 있도록 해준다. 파일이 ts로 끝나지 않더래도 타입스크립트는 컴파일할수있다.

“checkJs”

checkJs는 타입스크립트가 컴파일을 수행하지 않더래도 구문을 검사하고 잠재적인 에러를 보고해준다.

ts파일을 비롯된 js파일에 대해 컴파일을 두번 중복해서 수행할 필요가 없도록 한다.

그런데 만약 프로젝트가 타입스크립트를 전혀 사용하지않거나 바닐라자바스크립트 파일과 타입스크립트파일 병행해서 함께 검사하고 싶은 경우 사용하면 된다.

“declaration”

.d.ts 파일은 프로젝트를 라이브러리로 배포할때 중요한 고급 개념이다.

프로젝트의 모든 타입을 설명하는 manifest 파일이 필요한데 이것이 d.ts 파일이다

“sourceMap”

브라우저에서 검사페이지로 소스를 보면 Js 파일과 그 코드가 보인다.

그런데 만약에 복잡한 프로젝트에서 타입스크립트 와 디컴파일된 자바스크립트를 사용해야하는 경우에

sourceMap 을 사용하여 ts 소스까지 볼수있게한다. (이부분은 좀더 공부하거나 사용하면서 이해할것)

sourceMap 옵션을 true 로 설정하면 다음과 같이 기본에 있던 파일에 .js.map 이 추가로 생성된다.

그중 일부 .js.map 파일을 눌러 들어가보면 이런식으로 작성되어있고

검사페이지에서 소스에 기존에 없던 ts 파일도 이제 볼수있게 된다.

이렇게 될경우 button 이벤트를 사용하여 중단점을 설정하면 해당 버튼이 클릭하면 해당 ts코드에서 일시정지된다.

이 기능은 아주아주 유용하다 왜냐하면 디버깅 프로세스를 한단계 향상시켜주기 때문이다. 자바스크립트 파일대신 타입스크립트 파일에서 직접 작업을 수행할수 있기 때문이다. (기존 자바스크립트를 디버깅을 할때 보통 console.log로 체크하는데 이렇게 디버깅을 체크할수도 있다)

“outDir”

프로젝트가 커질수록 파일을 제대로 정리해야한다.

기본적으로 루트레벨에 있는 프로젝트 폴더에는 파일을 넣지 않는다.

그보다는 src 폴더와 dist 폴더를 함께 더 자주 사용하므로 각각의 폴더를 만들어준다.

dist 폴더는 모든 출력값을 보관하는 작업을 수행한다.

모든 자바스크립트 파일과 src 폴더에 모든 타입스크립트 파일이 보관되므로 기존에 있던 ts파일을 src를 넘겨주고 tsc (만약 tsc -w 이 되어있다면 안해도되고)로 컴파일하면 또다시 자동적으로 src폴더에 js 파일들이 생기는데

이러한 입력과 출력 파일을 제어하는것이 outDir 옵션이다.

따라서 outDir을 설정하면 생성된 파일이 저장되는 위치를 타입스크립트 컴파일러에게 알릴수 있다.

예를들어 내가 dist폴더에 저장하기위해서 outDir 옵션 경로를 “./dist”라고 한다면 타입스크립트가 컴파일되면서 dist 폴더에 js 파일들이 생성된다.

따라서 index.html 파일에서도 경로를 바꿔줘야한다. (또는 index.html을 dist 폴더에 넣어주거나)

검사페이지 소스에서도 dist폴더에 js파일이 담겨있는걸 볼수있다.

이렇게하면 js파일을 좀더 보기좋게 정리할수있게된다. 예를들어서 src 폴더안에 하위 다른 폴더(analytics)가 있고 그안에 Ts파일이 있다고 하더래도 타입스크립트파일을 컴파일하게되면 dist 폴더안에 하위폴더로 똑같이 복제되어 js파일이 생성되므로 따로 관리할필요가없게된다.

”rootDir”

outDir 과 비슷하게 컴파일하는 root 위치도 정할수있는데 예를들어 user라는 폴더에 ts파일이 있고 이를 dist 폴더에 js 출력파일이 담기게 되도록 outDir 설정했기때문에 dist 폴더안에 user라는 폴더가 생기고 그안에 js파일이 생기게된다.

이렇게되면 원하는 방식으로 정리가 되는게 아니기때문에 이때 rootDir로 경로를 설정해줘서 저런식으로 생성되지 않도록한다.

이렇게 rootDir 를 src 로 설정했기때문에 위와같이 src 폴더밖에 ts파일을 생성할경우 위와같은 에러가 발생하게된다. 왜냐하면 rootDir 하위에 담기지 않았기 때문이다.

“removeComments”

removeComments 옵션을 true로 설정하면

ts 파일안에 // 로 주석처리한 내용들이 지워진상태로 js파일을 생성한다.

이렇게 하면 일일이 주석을 찾아가면서 관리하지않아도된다. 또한 주석을 지워졌기때문에 파일 크기도 줄이는데 좋은 옵션이다. 기존에 자바스크립트로만 했을때는 서비스 배포 마지막단계에서 테스트를위해 작성했던 주석들을 일일이 찾아가면서 없앴는데 이런 설정이 있기때문에 아주 유용하게 쓸거라고 생가된다!!!

“noEmit”

만약 타입스크립트를 컴파일하면서 js 파일을 생성하고싶지않다면 noEmit을 true로 설정해주면된다. js파일없이도 에러체크를 할수있기때문에 예를들어 큰 프로젝트일경우 시간을 절약하기위해서 모든 출력 파일을 작성하고 싶지 않다면 이런식으로 설정해서 관리할수있다.

“noEmitOnError”

기본설정으로 두건 또는 false 값을 주게되면 ts파일이 에러가 있고 컴파일할경우에도 해당 js파일이 생성되게되는데 이렇게 에러가 있을때는 js파일을 생성하지 않기위해서 설정하는게 noEmitonError 옵션이다.

또한 에러가 발생하게되면 다른 ts파일이 정상이더래도 컴파일할수없다고 판단하여 어떤 파일도 허용되지 않기 떄문이다. 따라서 이에러를 수정해야만 타입스크립트를 사용하여 컴파일 할 수 있게된다.