Type Script_11 Compiler (컴파일)
TypeScript는 브라우저에서 바로 이해 하지 못하기 때문에 컴파일러를 통해 자바스크립트로 변환을 시켜줘야 한다.
우리는 node.js의 패키지 매니저인 npm을 통해 타입스크립트 컴파일러 설치하고 .js 파일로 변환시킬 것이다.
(npm = Node Package Modules) : Node.js에서 사용가능한 모듈들을 패키지화시켜 모아놓은 것
* 모두 터미널을 열어서 작업!
* VScode 사용
* tsc 명령을 사용하기 위해 타입스크립트를 글로벌 버전으로 설치
npm install -g typescript1. 1개의 파일을 실시간으로 확인하면서 작업할 수 있도록 설정할 경우
tsc 파일명.ts -wtsc 타입스크립트 툴을 이용해서 watch mode로 동작하면 된다.
2. 여러개의 파일을 관리할 경우
- tsconfig.json 파일 생성하기
tsc --init- 다수의 파일을 실시간으로 확인하기(컴파일하기)
tsc -w* tsconfig.json 파일 생긴 이후에는 따로 파일명을 입력하지 않아도 됨.
tsconfig가 있는 프로젝트 폴더 안에 있는 모든 ts 파일을 js 파일로 변환함.
3. tsconfig.json 옵션 설정
- 필요한 것들만 추가 또는 변경해서 사용하기
- "outDir" : "./bulid"
ㄴ 내가 지정한 폴더 안에 컴파일된 파일들 저장
- "rootDir" : "./src"
ㄴ 다른사람이 소스디렉토리 외에서 절대 타입스크립트 파일을 생성하지 못하게 만들때 사용
- "incremental" : true
ㄴ 계속 새롭게 모든 파일을 다 컴파일 하는것이 아니라 수정된 내용만 컴파일 함.
* 컴파일 시간은 빨라지지만, 예전 컴파일했던 정보들을 디스크에 보관하니까 pc용량이 커질 수 있음..
- "composite" : true
ㄴ incremental이랑 함께 사용. 이전에 빌드된 정보들을 기억하고 있어서 다음 빌드시 빠르게 진행시켜줌.
- "target" : " "
ㄴ ECMAscript 버전을 지정해서 컴파일 함
- "module" : " "
ㄴ 노드프로젝트라면 commonjs를, 브라우저 환경이라면 ECMAscript시리즈를 선택
- "lib" : " "
ㄴ 내가 어떤 라이브러리를 사용할 건지 정할 수 있으나 보통은 그냥 타겟에서 따라져 나오는 것을 선택해서 이용
- "outFile" : "./"
ㄴ 다수의 타입스크립트 파일을 딱 하나의 자바스크립트 파일로 만들 때 사용
- "sourceMap" : true
ㄴ 디버깅 할때 유용함. map파일이 생성되고, TS파일을 JS파일로 컴파일 했을 때 코드길이가 달라지는데
어떤게 어떤 위치에 있는지 지도같은 역할을 해줌
- "allowJs" : true
ㄴ 프로젝트 안에서 자바스크립트파일을 같이 쓸건지, 프로젝트의 자바스크립트와 타입스크립트를 섞어서 쓸지 결정
- "checkJs" : true
ㄴ 자바스크립트 파일에서 뭔가 좀 잘못하고 있다면 에러가 뜰 수 있도록 설정
- "noEmit" : true
ㄴ 자바스크립트 코드로 변환없이 컴파일 에러 체크할 때 사용.
- "exclude" : ["./src/dd.ts"]
ㄴ 명시된 파일만 빼고 컴파일되도록 지정
- "include": ["./src/cc.ts"]
ㄴ명시된 파일만 컴파일되도록 지정
* 공식 문서 : www.typescriptlang.org/docs/handbook/compiler-options.html