섹션 3: TypeScript 컴파일러(및 구성)
📌 하나의 타입스크립트 파일의 변경 감시 모드
tsc app.ts -w(또는 tsc app.ts -watch)
📌 여러 타입스크립트 파일의 컴파일
tsconfig.json 파일 생성 명령어 : tsc --init
js 파일 일괄 컴파일 명령어 : tsc
📌 tsconfig.json 옵션
{
"compilerOptions": {
// "target" 옵션은 컴파일된 코드를 지원하는 브라우저를 정의. "" 안에서 ctrl+space를 누르면 자동완성을 선택할 수 있음. 참고로 es6는 es2015
// "sourceMap" 옵션은 개발자 도구 Sources에서 js파일 뿐만 아니라 ts 파일도 다룰 수 있게 해준다. 따라서 ts파일을 이용해 디버깅(브레이크 포인트 활용)이 가능하다.
"outDir": "./dist", // js 출력 파일을 dist 폴더에 생성. 폴더 구조도 복사됨
"rootDir": "./src", // ts 입력 소스 파일 위치
"removeComments": true, // 자바스크립트 컴파일시 주석 제거
"noEmit": true, // js 출력 파일을 생성하지 않고 타입 체크만 수행함
"noEmitOnError": true, // ts 파일에 오류가 있으면 js 생성하지 않음
},
"exclude": ["basics.ts",
"*.dev.ts"
// 컴파일 제외할 파일을 배열에 추가할 수 있음. 와일드카드도 사용 가능
// "**/*.dev.ts" 어떤 폴더에 있든지 컴파일 제외
// "exclude" 옵션을 사용하지 않으면 "node_modules"은 자동 제외 됨(기본값)
// 만약 특정한 파일을 제외하고 싶어서 이 옵션을 설정했다면 node_modules 폴더를 꼭 포함시킬것!
],
"include": ["app.ts"] // 이 옵션을 사용하면 배열에 포함된 파일만 컴파일 함. 포함시키고 싶은 폴더 전체를 지정할 수도 있음. 반면 "files": ["app.ts"] 옵션은 파일만 포함시킬 수 있음
}
📌 button 태그가 없다면(null)?
// tsconfig.json 옵션에서 "strict": true이거나 "strictNullChecks": true 일때
// const button = document.querySelector('button'); // 예를 들어 button 태그가 없다면(null)?
const button = document.querySelector('button')!; // 느낌표를 사용할 수 있고,
if (button) {} // if 문을 사용할 수 있다.
📌 실습을 위한 자동 컴파일 환경 설정
liver-server 설치
npm i lite-server
package.json 수정
{
"name": "typescript-udemy",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "lite-server" // 이 부분 추가
},
"author": "",
"license": "ISC",
"devDependencies": {
"lite-server": "^2.6.1"
}
}
lite-server 실행
npm start
tsconfig.json 수정
{
"compilerOptions": {
// (생략)
"rootDir": "./src", // 경로 확인 요망
// (생략)
"outDir": "./dist", // 경로 확인 요망
// (생략)
},
// (생략)
}
컴파일러 감시 모드로 실행
tsc -w