[TypeScript] 타입스크립트 컴파일러

계속 tsc app.ts 를 하기 귀찮을때, 타입스크립트에게 파일을 감시하고 변경할때마다 다시 컴파일하도록 하려면?

먼저 index.html에 나의 스크립트를 다 넣어야함! 

1. 관찰자 모드

tsc app.ts --w 또는 tsc app.ts --watch

 

- 해달 파일에 대해 감시모드가 되고 파일에서 무언가를 변경하고 저장하면 dist에 있는 파일도 변경되고 자동으로 다시 컴파일됨

* 오류코드를 치면 오류 코드 출력됨 

- 단점 : 여전히 파일을 구체적으로 타겟팅해야함

 

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

tsc --init

tsconfing.json이 생김 - 타입스크립트를 위한 프로젝트 파일 표시기. 이 폴더에 있는 프로젝트와 하위폴더는 타입스크립트로 관리되어야함

 

3.  프로젝트 관리 옵션

3-1) 컴파일 해서는 안되는 파일이 있다면? exclude

tsconfig.json의 맨 아래로 내려가서 

  },
  "exclude": ["원하는파일.ts"]
}

 

dev.ts로 끝내는 모든 파일을 컴파일 하지 않으려면! (와일드카드)

  },
  "exclude": ["*.dev.ts"]
}

*.dev.ts - 끝이 dev.ts로 끝나는 파일
**/*.dev.ts - 어떤 폴더에 있든 dev.ts로 끝나는 파일

추천하는 exclude!  

- node_modules! 근데 이건 exclude를 설정하지 않으면 원래 기본값임. 하지만 하나라도 exclude를 설정했다면 무조건 설정해줘야함!! 

  "exclude": [
    "node_modules" //exclude를 하나도 지정하지 않으면 원래기본값
  ]

 

 

3-2) 컴파일 프로세스에 포함할 파일 구체적으로 지정하려면? include

- include를 설정하면 컴파일 하려는 건 전부 써줘야함! 

exclude와 같은 위치

  "include": [
    "app.ts"
  ]

 

3-3) 개별 파일을 가리키고 싶다면? files

- inclue와 비슷하지만, include는 포함시키고 싶은폴더 전체를 지정할 수 있지만,

  files는 컴파일하려는 개별 파일만 지정할 수 있음

- 프리 파일로만 작업하는 소규모 프로젝트에 적합한 옵션

  "files":[
    "app.ts"
  ]

 

4. 컴파일 대상 설정하기 

tsconfig.json의 "compilerOptions"에 위치한 것 

  "compilerOptions": {
      "target": "es2016", //어떤 target 자바스크립트 버전으로 컴파일 할 것인가
      // "lib" : [], // 타입스크립트의 객체 및 기능 기본값을 지정할 수 있는 옵션(DOM API 등), 주석으로 해둘 경우 기본값이 적용됨
      // "allowJs" : true, //(별로필요없)컴파일에 자바스크립트 파일을 포함시킬 수도 있음. ts로 끝나지 않은 자바스크립트 파일도 타입스크립트는 컴파일함.  
      // "checkJS" : true, //(별로필요없)allowJS에서 컴파일 한 것들을 컴파일 하지 않음. 그래도 구문을 검사하고 잠재적 오류는 보고해줌
      // "sourceMap" : true, //디버깅과 개발에 도움이 됨. 타입스크립트 파일, 즉 input 파일에서 직접 작업할 수 있음
      "outDir" : "./dist", //타입스크립트 컴파일러에게 생성된 파일을 어디에 저장해야하는지 알려줌. 컴파일하면 src폴더의 구조가 dist폴더로 복제됨.
      "rootDir" : "./", //파일이 저장된 폴더를 구체적으로 설정. 타입스크립트 파일이 있는 폴더가 루트레벨에 있더라도 출력에 포함하지 않을 수 있음!(src에 있는 것만 출력)
      // "removeComments": true, //주석없애기. 파일의 크기를 줄일 수 있음
      // "noEmit": true, //자바스크립트 파일을 생성하지 않음. 파일을 검사하고 잠재적인 오류를 보고할 수 있음. 실제 출력파일을 만들지 않으므로 시간 절약
      // "downlevelIteration": true, // 이전 버전의 자바스크립트로 컴파일하고 for 루프를 사용하는 경우, 컴파일이 제대로 안되는 문제가 생기기도 함. 더 정확한 컴파일 가능. 하지만 더 장활한 코드 출력. 뭘 알때만 켜기
      "noEmitOnError" : true, //참, 거짓 설정할 수 있고 기본값은 거짓-오류가 발생해도 js 파일이 생성됨. true로 설정하면 문제가 있는 파일은 생성되지않음. 
      "strict": true, //모든 strict 타입 검사 옵션 활성화

 

* 폴더

dist 폴더 : 출력

src 폴더 : 타입스크립트파일

 

5. VSCode 디버깅을 위한 extension