TS Compiler

Watch

만약 app.ts를 컴파일 할 때 tsc app.ts -w 혹은 tsc app.ts --watch를 입력한다면 관찰 모드로 진입하게 된다.

그러면 저장이 될 때 마다 디스크에 저장이되고, 컴파일을 자동적으로 다시 하게 된다.

이처럼 관찰 모드는 좋은 기능이지만, 파일을 구체적으로 지정해야 한다는 번거로운 단점이 있어 규모가 큰 프로젝트에서는 잘 사용하지 않는다.

 

전체 프로젝트 컴파일 / 다수의 파일

특정 파일을 지정하지 않고 tsc --init 을 하면 이 커맨드가 실행되는 폴더의 모든 항목을 TS에게 알려주게 된다.

그러면 tsconfig.json 파일이 생기게 되고, 설정들을 관리할 수 있다.

그리고 나서 tsc를 입력하게 되면 폴더 내의 모든 .ts 파일들을 컴파일하게 된다.

또한 모두 관찰 모드로 결합하려면, tsc -w 혹은 tsc --watch 를 입력하면 된다.

 

 

파일 포함 및 제외

/* tsconfig.json */
"exclude": [
  "node_modules"
],
"include": [
  "app.ts"
],

 

 

컴파일 대상 설정하기

tsconfig.json에 "compilerOptions" 라는 옵션이 있다. 여기에는 "target"이 속성이 존재하는데, 어떤 JS 버전을 대상으로 코드를 컴파일할 것인지 TS에게 알려준다. 만약 "es5"라고 되어있다면 "es5"에는 let과 const가 존재하지 않기 때문에 컴파일을 하게 되면 JS 파일에는 var로 컴파일이 될 것이다. 이것은 온전히 선택사항이다. 최신 웹 페이지에서만 동작하도록 하려면 "es6"으로 사용해도 되고, 오래된 페이지에서도 적용하게 하려면 그 하위 버전을 선택하면 된다.

 

 

소스 맵 작성하기

TS 파일을 컴파일하고 브라우저에서 개발자도구의 Source 탭에 가보면 컴파일된 JS 파일만 보인다.

하지만 tsconfig.json에서 "sourceMap"의 값을 true로 설정한다면, TS 파일도 Source 탭에서 볼 수 있게 된다.

뿐만 아니라 중단점 설정을 해서 디버깅도 할 수 있게 된다. 따라서 이 설정은 컴파일 된 복잡한 JS 파일 대신 TS로 디버깅을 할 수 있게 해준다.

 

 

rootDir 및 outDir

먼저 "rootDir" 속성은 설정한 경로에만 있는 파일만 컴파일 할 수 있도록 해준다.

"outDir" 속성은, TS 파일을 컴파일 하면 JS 파일이 생기는데, 같은 경로에 생기지 않고 설정한 경로에 output을 저장하도록 해준다.

 

 

컴파일 오류 시 파일 방출 중지하기

"noEmitOnError" 속성은 기본적으로 false가 default value이다. 이 값은 에러가 있다면 JS 파일을 생성하게 한다. 하지만 이 값을 true로 바꾸게 되면 에러가 있다면 JS 파일을 만들어내지 않는다.

 

 

Strict 컴파일

모든 타입을 엄격히 검사하려면 "strict" 옵션을 true로 바꿔주면 된다.

하지만 개별적으로 설정할 수 있는데 그 옵션들은 아래와 같다.

• "noImplicitAny": 모든 매개변수와 값의 타입을 명확히 명시해야 한다.
• "strictNullCheck": null 값을 잠재적으로 가질 수 있는 값에 접근하고 작업하는 방식을 타입스크립트에게 매우 엄격하게 알려준다.

 

 

코드 품질 옵션

• "noUnusedLocals": 사용하지 않는 지역 변수를 허용하지 않는다.
• "noUnusedParameters"
• "noImplicitReturns"