[TypeScript] TypeScript 컴파일러

TypeScript 컴파일러

wath

변경 사항이 잦을 때 watch 모드를 사용하면 변경사항이 생길 때마다 자동으로 컴파일 할 수 있다.

tsc app.ts --w

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

타입스크립트에게 프로젝트 단위로 컴파일해야한다고 알려줄 수 있다.

아래 커맨드를 통해 tsconfig 파일을 생성한다.

tsc --init

한꺼번에 컴파일을 할 수 있다.

tsc

특정 파일 제외시키기

tsconfig.ts 에서 exclude 설정을 통해 특정 파일을 컴파일 시 제외할 수 있다.

"exclude": [
    "analytics.ts",
  ]

아무 것도 설정하지 않으면 자동으로 node_modules이 제외된다.

패턴으로 제외시키기

"exclude": [
    "*.dev.ts", //dev.ts가 포함된 모든 파일
    "**/*.dev.ts" //모든 폴더에서 dev.ts가 포함된 모든 파
]

특정파일 추가하기

 "include":[
    "app.ts"
  ]

compilerOptions

타입스크립트 코드가 컴파일 되는 방식을 관리한다.

sourceMap

sourceMap 설정을 켜고 컴파일하면 .js.map 파일이 생성된다.

app.ts

const button = document.querySelector('button')!;
button.addEventListener('click', () => {
  console.log('Clicked!');
});

app.js

"use strict";
const button = document.querySelector('button');
button.addEventListener('click', () => {
    console.log('Clicked!');
});
//# sourceMappingURL=app.js.map

app.js.map

{"version":3,"file":"app.js","sourceRoot":"","sources":["app.ts"],"names":[],"mappings":";AAAA,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC;AACjD,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IACpC,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;AAC1B,CAAC,CAAC,CAAC"}

입력 파일에 자바스크립트 파일을 연결하는 최신 브라우저와 개발자 도구 간의 다리이다.

개발자도구에서 타입스크립트 파일을 보는 것이 가능하고 중단점을 둘 수도 있어 디버깅 프로세스를 향상 시켜 준다.