1. tsc watch mode : 저장할 때마다 자동 컴파일

// 한 파일만 컴파일
tsc 파일명
// 한 파일먄 컴파일 후 watch mode
tsc 파일명 --watch 혹은 tsc 파일명 -w 
// 전체 파일 컴파일
tsc
// 전체 파일 컴파일 후 watch mode
tsc --watch 혹은 tsc tsc -w

-> ts 파일을 저장할 때마다 자동 컴파일된다.
-> 주의: 물론 해당 명령어를 입력한 터미널은 종료하면 안된다.

2. tsconfig.json에 대해서(json 데이터)

1) 일단 tsconfig.json 파일 다운 받기

tsconfig.json 파일 생성하기

tsc --init 

-> tsconfig.json 안에는 많은 json 데이터들이 있으며, 대부분이 주석처리되어 있다. 이들에 대해 알아보자!

2) "exclude"/"include" : 컴파일할/컴파일하지 않을 파일 구분하기

{
  // 최상위에 작성
  "exclude" : [
  	"파일명 혹은 파일 확장자 등",
    "node_modules" // 기본이어야 함
  ],
  "include": [
  	"파일명 혹은 파일 확장자 등"
  ]  
}

• "exclude" : 컴파일하지 않을 파일을 배열에 작성
  - exclude에서는 node_modules는 기본으로 넣어주기

• "include" : 컴파일 되는 파일을 배열에 작성

• 결국 컴파일되는 파일은? : include 파일 - exclude 파일

• 파일 작성법
  - 파일명 : 확장자 포함 파일 명
  - 확장자 같은 파일 모두 포함 : *.ts
  - 폴더 내부 파일(경로) : 예시 참고
  

경로 예시

"**/*.ts" // 폴더 내 ts 파일
"src/**/*" // src 폴더 내부 폴더 내부 모든 파일

3) compilerOptions 살펴보기(기본적인 것만 알아보자)

• 주석처리된 것을 제외하고는 자주 사용하는 것일 듯..(강의)

{
	"compilerOptions": {
      "target": "es5", // 어떤 자바스크립트 버전으로 컴파일될건지
      "module": "commonjs" // 일단 스킵
      // "lib": [], // 사용할 라이브러리 지정. 주석처리하먄 default("target"에 따른 기본값). 주석을 풀면 넣어줘야 할 게 많음. DOM 같은 것들.. 커스텀으로 설정하려면 사용
      // "allowJs": true, // 자바스크립트 파일도 컴파일하겠다.
      // "checkJs": true, // 자바스크립트 파일도 type 체크 하겠다.
      // "sourceMap": true, // .js.map 파일도 추가로 생성하여 ts와 js를 연결하는 다리 역할을 해줘 디버깅이 용이해진다. 디버깅 시 매우 용이
      "outDir": "./", // 컴파일된 js파일이 어디에 생성될 것인지
      "rootDir": "./", // 컴파일할 ts파일의 root 경로
      "removeComments": true, // 주석 제거할 것인지
      // "noEmit": true, // output 파일을 생성하지 않고 타입 체크할 것인지
      // "downlevelIteration": true, // for 반복문이 잘 작동하지 않을 때 살펴볼 필요 있다. 이걸 on하면 target이 'ES5', 'ES3'일 때에도 'for-of', spread 그리고 destructuring 문법을 지원한다.
      // "noEmitOnError": boolean, // true면 어떤 파일이라도 ts 에러 나면 전체 js가 컴파일되지 않음. false면 ts 에러가 나더라도 일단 컴파일함
      
      // strict mode에 대해
      "strict": true, // default. 아래 주석처리된 것이 모두 true로 됨
      // "noImplicitAny": true, // 암시적으로 선언된 것이 any로 추론되면 에러를 알려줌(함수의 매개변수)
      // "strictNullChecks": true, // null 혹은 undefined를 검사함.
      // "strictFunctionTypes": true, // 나중에 자세히 알아보자
      // "strictBindCallApply": true // 함수에서 bind/call/apply 메서드에 더 엄격한 검사
      // 등등...
      
      // 코드 퀄리티(사용되지 않는 변수에 대해 경고(에러는 아니나 검사에서 걸리도록)
      "noUnusedLocals": true, // 변수
      "noUnusedParameters": true, // 함수의 매개변수
      "noImplicitReturns": true // 함수의 모든 경우에 대한 return이 있는지를 체크
	}
}

3. vscode에서 디버깅하기

1) tsconfig.json 파일에 compilerOptions에서 "sourceMap" : true 로 변경(그래야 ts로도 디버깅 가능)

2) debugger for chrome 익스텐션 설치(두가지 중 하나. 첫 번째거가 맞긴 한데 deprecated 되었다고 해서 아래 것으로 받아보았다. ㅠㅠ)

3) breakpoint 설정후 "디버깅 시작" 클릭(맥 기준 "실행" -> "디버깅 시작")


4) chrome 클릭 후 launch.json의 url을 사용 url과 같도록 변경(3000)

5) 디버깅!

4. 강의에서 제공해준 유용한 링크들

Useful Resources & Links
- tsconfig Docs
- Compiler Config Docs
- VS Code TS Debugging