TS Compiler

• tsc .ts -w
  - 하나의 ts가 변환할 때마다 항상 업데이트 되어서 자바스크립트 파일로 변환됨
• tsc --init
  - 여러 파일을 컴파일하고 다양한 옵션들을 사용하기 위해 tsconfig.json 파일 생성
• tsc -w
  - tsconfig.json 파일이 있는 프로젝트 폴더 안에 있는 모든 타입스크립트를 변환
• src(source) 디렉토리 안에 만들고자 하는 기능 단위로 디렉토리를 만들어서 그안에 관련된 파일들을 작업하는것이 일반적

tsconfig.json

타입스크립트 컴파일 환경설정 파일

compiler options

outDir: 컴파일된 파일들이 저장될 공간을 지정

• default: 현 디렉토리 ts파일 공간
• ts가 있는 최상위부터 그것이 반영이 되어 컴파일된 아웃 디렉토리에 나오게 된다.

rootDir: ts 최상위 디렉토리 지정

• 최상위 디렉토리 외에 ts를 작성하는 것을 막음

incremental: 변화된 ts파일만 컴파일

• default: false
• 수정된 내용만 compoile
• 대신에 예전에 compile했던 정보들을 pc에 보관됨

target: 어떤 버전으로 컴파일 할것인지 설정

• 버전을 너무 낮게 잡으면 오히려 안좋음 (더러운 코드가 많이 생김)
• ES5 또는 ES6으로 설정하자

module: 모듈정보를 설정

• Node 환경: CommonJs
• Browser 환경: ECMA Script

allowJs: 프로젝트에서 JS와 TS를 섞어서 쓸지 결정

• default: true

checkJs: JS에서 에러체크

• default: true

outFile: 작성한 다수의 ts파일을 하나의 js파일로 만들때 사용

composite: incremental 옵션과 같이 사용

• 이전에 빌드된 정보를 기억하고 다음에 빌드할때 더 빨리 빌드할수있게 도와줌

tsBuildInfoFile:incremental true 일때 적용

• 관련된 정보들을 담는 파일을 지정

removeComments: comment를 모두 삭제

noEmit: 컴파일 에러만 확인

• 실제로 js로 컴파일하지 않고 컴파일에러만 확인할때 사용

그 외 options

exclude: 컴파일 제외할 ts파일 지정

• "exclude": ["제외할 ts 경로"]

include: 컴파일할 ts파일 지정

• "include": ["컴파일할 ts 경로"]

디버깅

• 개발자 도구에서는 ts파일을 볼수 없고 compile된 난해한코드에 js파일만 볼수 있으므로 디버깅이 힘들다.
• tsconfig.json의 sourceMap 옵션을 true로 설정하면 Map File 생성
  - Map File이란 ts 코드와 컴파일된 js 코드를 연결시켜주는 모든 정보가 담긴 파일
  - 브라우저 디버깅툴에서 이 Map파일을 읽고 ts파일을 볼수있게 해줌