컴파일러(compiler) 설정 방법

TypeScript는 브라우저에서 바로 compile하지 못한다.

브라우저가 읽을 수 있는 JavaScript로 변경해줘야한다. (정확히는 ECMAscript)

TypeScript는 자체에서 JavaScript로 변경할 수 있는 compiler가 내장되어있고

다양한 설정이 가능하다.

npm install -g typescript

타입스크립트를 설치하면 tsc 명령어로 컨트롤할 수 있다.

tsc logging.ts -w

낱개로 컴파일 하는 법

(타입스크립트 파일을 지정하여 저장 할때마다 자동 컴파일 함. = watching모드)

tsc --init

tsconfig.json 생성

tsc -w

tsconfig.json의 설정대로 컴파일 실행

{
  "compilerOptions" : {
  	// .......
  }
}

tsconfig.json가 생성이 되면 기본적으로 위 구조로 상당히 많은 설정들이 있다.

모두 알 필요는 없고 알아두면 좋은 필요한 설정을 알아보자.

"outDir" : "./build"

컴파일완료된 js 파일들의 기본 디렉토리 지정

지정을 하게 되면 디렉토리 구조 그대로 만든다.

"rootDir" : "./src"

ts파일의 root 위치 (설정하면 해당 경로 하위의 ts파일만 컴파일 함)

"incremental" : true

변경된 사항들만 컴파일하기

"composite" : true

빌드된 내용을 저장하고 있다가 빨리 빌드될 수 있도록 도와줌

"target" : "선택"

컴파일할 ES(ECMAscript) 버전을 선택할 수 있음

"module" : "선택"

모듈 버전을 선택할 수 있음

"lib" : "선택"

라이브러리 선택

"outFile" : "./"

하나의 파일로 출력됨.

"sourceMap" : true

이 설정은 매우 중요하다.

ts파일을 js파일로 컴파일하면 문법이 다르기때문에 코드의 위치가 달라진다.

브라우저에서 확인할 수 있는 것은 js인데 오류가 난 위치를 찾기가 어려울 수 있다.

그때 이 설정을 true로 하게 되면 map파일이 함께 생성이 된다.

이 map파일은 ts와 js를 이어주는 다리 역할을 하며 json 형태의 알 수 없는 긴 데이터가 들어있다.

{
  "compilerOptions" : {
  	// .......
  },
  "exclude" : ["./src/dev.ts"], // 제외
  "include" : ["./src/dev.ts"], // 포함
}

compilerOptions 밖에 exclude와 include를 array형태로 만든다.

컴파일 때 폴더 혹은 파일들을 제외하거나 포함 시킬 수 있다.

Notepad of Ordinary Developer