3. 컴파일러 설정과 사용 (tsconfig.json)

watch 모드

tsc app.ts --watch또는 tsc app.ts -w 를 입력하면 해당 파일이 관찰 모드로 진입한다. ctrl+c로 저장할 때마다 컴파일이 실행된다.

단점은 특정 파일을 지정해야 한다는 것이다. 규모가 큰 프로젝트에서는 많이 사용하지 않는다.

 

전체 프로젝트 or 다수의 파일 컴파일하기

index.html에 다수의 js파일(ts로 컴파일하면 생길 파일)을 src로 걸어 두면, 그 중 한 가지만 변경사항이 생기더라도 전부 리컴파일한다.

tsc --init 을 입력하면 tsconfig.json 파일이 생기면서 현재 프로젝트 폴더에 들어있는 모든 ts 파일을 컴파일 대상으로 본다. tsc -w 또는 —watch를 입력하면 관찰 모드로 확인하고, 변경 사항이 적용되어야 하는 모든 ts파일을 다시 컴파일한다.

 

파일 포함 or 제외하기

tsconfig에 “exclude” 옵션(key)을 추가하고 제외할 파일들의 배열을 넣으면(value) 그 파일들은 컴파일 대상에서 제외된다. *.dev.ts 처럼 와일드카드문자를 추가하면 특정 확장자를 모두 제외할 수도 있다.

일반적으로는 “node_modules” 폴더를 넣는다. 라이브러리 중 ts 를 사용하는 것이 있다면 그것이 컴파일되면서 계산과정이 느려지거나 프로젝트가 망가질 수 있기 때문이다.

(but 만약 “exclude” 옵션 자체를 넣지 않는다면 디폴트로 node_modules는 제외한다)

“include” 옵션을 추가하면 컴파일 할 파일을 지정할 수 있다. 단, 이 옵션을 일단 추가하면 컴파일 할 모든 파일을 전부 배열로 넣어 주어야 하고, 여기 넣지 않은 ts파일은 컴파일되지 않는다.

include와 exclude를 둘 다 사용하면 include에서 exclude를 제외한 목록만이 컴파일된다.

 

컴파일러 옵션 설정

“compilerOptions”은 타입스크립트가 파일을 처리하는 과정을 설정한다.

• “target” 옵션은 js로 변환한 결과물의 ecma 버전을 지정한다. 기본은 es5이지만, babel을 사용하기 때문에 굳이 타입스크립트 차원에서 변환하지 않겠다던가 es6를 지원하는 브라우저에서만 작동하는 앱이라면 es6로 설정해도 된다.
• “lib” 옵션은 타입스크립트가 런타임에서 작동하는 데 필요한 사항들을 담는다. 값으로 들어가는 것은 dom, console, dom.iterable scripthost, es6 등의 객체이다.(모두 lib 옵션을 사용하지 않으면 디폴트임)
• allowJs: true로 설정 시 파일이 .ts 확장자가 아니라 .js더라도 타입 검사를 실행한다. js와 ts 파일을 함께 사용할 때 유용하다.
• sourceMap : 개발과 디버깅에 관련한 옵션으로, true로 설정 시 .ts파일과 .js파일을 연결해주는 .js.map 파일이 설정되고 개발자도구의 sources 탭에서 ts 기준 break point를 볼 수 있다.
• rootDir : 컴파일 할 파일이 저장된 위치를 지정한다. 보통 src 폴더이다.
• outDir : 컴파일된 파일이 저장될 위치를 지정한다. 보통 dist 폴더이다. rootDir의 폴더 구조를 그대로 유지한다.
• removeComments: true로 설정하면 주석을 제외하고 컴파일한다.
• noEmit: js파일을 생성하지 않는 옵션이다. 당장 js파일까지 생성할 필요는 없고 다만 ts파일이 에러 없이 작성되었는지만 확인하고 싶을 때, 시간과 자원을 아낄 수 있는 옵션이다.
• downlevelIteration: 생성된 루프가 원래 ts파일의 루프와 다르게 동작하는 경우에만 true로 설정해서 에러를 방지한다.
• noEmitOnError: 타입스크립트는 원래 에러가 발생하더라도 js파일을 생성하고 본다. 그러나 이 옵션을 true로 설정하면 에러가 발생하는 파일은 컴파일하지 않는다.
• /* strict */: strict 모드를 true로 설정하면 관련된 하위 옵션들이 전부 true가 된다. this 키워드의 의미나 변수의 타입이 null이 될 수 있는 가능성 등을 엄격하게 체크한다. (추후 보충)
• /* additional checks*/: 코드 품질을 향상시켜주는 옵션들.
  • nounusedvariables: 사용되지 않은 지역변수가 있으면 에러를 표시한다.
  • noimplicitreturns: 반환값이 있을 때도 있고 없을 때도 있는 함수를 용납하지 않는다.

 

vscode에서 debugger at chrome 사용하기

1. 익스텐션을 설치하고 jsconfig.json에서 sourceMap 옵션을 활성화한다.
2. 코드에서 break point를 찍은 뒤 VScode의 Debug 탭에서 start debugging을 누른다.
   1. 처음에는 런타임을 선택해야 한다. chrome을 선택한다.
3. .vscode의 launch.json에서 실행 방법을 구성한다.
   1. url을 개발 서버가 구동되고 있는 localhost:3000으로 지정한다.
4. 좌측의 디버깅 화면에서 변수를 추적하고 특정 표현식과 현재 콜스택을 확인할 수 있다.
5. click me를 누르면 파일의 break point에서 코드 실행이 일시 중지되고 편집기로 돌아가면서 디버깅 화면에서 정보를 확인할 수 있다.