[TypeScript] 유데미 강의 "Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS" 정리(섹션3)

섹션 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