tsconfig | ts compiler

npx tsc 

$ npx tsc app.ts --watch
$ npx tsc app.ts -w

$ npx tsc --init

 

1. watch 모드를 이용하면, 컴파일러가 지정된 ts 파일의 변화를 관찰하며 자동으로 변환한다. 
2. 큰 규모의 프로젝트에서 이런 방식의 컴파일은 불편할 수 밖에 없는데, 여러 개의 ts 파일로 작업하기 때문이다. 
3. init 옵션을 이용하면(프로젝트 폴더를 ts 프로젝트로 지정할 때 한번만 사용하면 된다), 해당 프로젝트 폴더를 ts가 관리한다.
   • tsconfig.json 파일이 생성된다. 
   • 폴더에 존재하는 모든 ts 파일에 대해 컴파일을 진행한다. => html <script />에 컴파일된 js를 연결한다. 

tsconfig.json

0.01MB

 

tsconfig.json 

shortcut) ctrl + space를 이용하면, 옵션에 가능한 자동완성 값을 확인할 수 있다. 

exclude & include | compile 대상에서 제외, 포함할 파일 지정

{
  "compilerOptions": {
   // ... 
 },
  "exclude": [ // compile 제외 파일 지정
    "node_modules", "*.dev.ts", 
  ], 
  "include": [ // compile 대상 파일 지정(이 옵션에 포함된 항목들만 js로 컴파일 된다)
    "src"
  ], 
}

 

1. 기본적으로 include - exclude 파일이 컴파일 대상이 된다. 
2. exclude | compile 대상에서 배제할 파일을 지정할 수 있다. 
   • default | exclude 옵션을 아예 지정하지 않더라도, node_modules이 자동으로 컴파일 대상에서 배제된다.
   • 따라서 node_modules만 compile 대상에서 제외하는 것이라면, 따로 exclude 옵션을 지정할 필요는 없다. 
   • exclude 옵션을 지정한다면, node_module을 명시적으로 작성해 주어야 한다. 
3. include | compile 대상에 포함할 파일을 지정할 수 있다. 
   • default | include 옵션을 아예 지정하지 않으면, exclude에 지정된 파일을 제외한 모든 ts 파일이 컴파일 대상이 된다. 
   • include 옵션을 지정한다면, compile 대상이 될 모든 파일을 명시적으로 작성해 주어야 한다.
4. files | include와 비슷한 옵션이지만, 컴파일 대상으로 폴더를 지정할 수는 없다(개별 파일만을 대상으로 지정할 수 있다). 

compilerOptions | how ts files are compiled

 {
    "compilerOptions": {
     // ... 
     "target" : "es6", 
     "module" : "나중에 학습",
     "lib": ["dom", "es6", "dom.iterable", "scripthost"],
     // "allowJs": "true",
     // "checkJs": "true",
     "sourceMap" : true,
     "outDir" : "./dist", 
     "rootDir" : "./src", // include 옵션과 같은 역할 
     "removeComments" : true, // 컴파일 시 주석은 미포함 
     "noEmit": true, // 출력파일을 작성하지 않고도 컴파일러가 파일을 검사하고, 에러를 분석한다
     "noEmitOnError": true,
     "strict": true,
   }, 
 }

 

 

1. target | ts를 어떤 버전의 js로 컴파일할 것인지 설정
   • old browser에서도 코드가 동작하도록 버전을 설정할 수 있다.  
2. module
3. lib | ts가 이해할 수 있는 object를 설정
   • default | target 버전에서 사용 가능한 모든 object이 자동으로 포함된다. 따라서 다른 object를 추가하는 것이 아니라면, 예제에서와 같이 따로 옵션을 지정할 필요는 없다.
   • ts는 브라우저에서 동작하는 코드가 아니다. => 브라우저에서 제공하는 객체를 이용하려면, ts가 그 객체를 알고있어야 한다. 
4. allowJs 
   
   • ts 파일이 아니더라도 compile 대상이 될 수 있다. 예를 들어 js 파일을 다른 버전의 js로 컴파일하고자 할 때 사용할 수 있다. 
   • js 기반 프로젝트에서 ts가 제공하는 기능을 사용하고자 할 때 이용할 수 있는 옵션이다. ts 기반 프로젝트에서는  컴파일된 js 파일이 다시 한 번 컴파일 되기 때문에, 해당 옵션을 사용하지 않는다. 
5. checkJs 
   
   • ts 파일이 아니더라도, error report의 대상이 될 수 있다. 
   • 마찬가지로 ts 기반 프로젝트에서는 사용하지 않는다. 
6. sourceMap 
   • ts 파일을 컴파일하면 .js.map 파일이 생성된다. => 개발자 도구 > sources 에서 js 파일 뿐만 아니라, ts 파일을 확인할 수 있다.
   • ts 파일에서도 breack point를 지정할 수 있기 때문에 디버깅에 유용하다. 
7. outDir | 컴파일된 js 파일(output files)이 위치할 폴더를 지정할 수 있다. 
   • dist | distribution(배포)의 약어로, public, build 폴더와 비슷한 의미를 갖는다 
   • 컴파일 대상 폴더와 같은 구조로 output 폴더를 구성한다.
8. rootDir vs. include 
   
   • include 옵션과 마찬가지로, 컴파일 대상 폴더를 지정할 수 있다. 
   • rootDir 옵션은 컴파일 대상 폴더(src)의 구조와, 컴파일 된 파일이 출력되는 폴더(dist)의 구조가 같은 상태인지를 체크할 수 있다.
9. noEmit
   • js 파일을 생성하지 않고도, ts 컴파일러가 파일을 검사하고 error를 report 할 수 있다.
   • 규모가 큰 프로젝트에 적합하다. 
10. noEmitOnError
    • false | 컴파일 에러가 발생하더라도 js 파일을 생성한다.
    • true | 하나의 ts라도 컴파일 에러가 발생하면, 모든 ts를 js로 변환하지 않는다.
11. strict | 더 좋은 품질의 코드를 작성할 수 있도록 strict 옵션을 사용할 수 있다. strict: true는 아래의 모든 옵션을 true로 설정한다.  
    • noImplicitAny | 아무런 타입도 지정하지 않은 코드(implicit any code)에서 컴파일 에러가 발생한다. 
    • strictNullChecks | null일 수도 있는 value에 접근하려고 하면 에러가 발생한다.
      • ! | value!를 이용하면 그 value가 null이 아니라는 것을 명시할 수 있다. 
    • strictFunctionTypes 
    • strictBindCallApply | bind, call, apply를 호출할 때 모든 인자가 알맞게 전달되었는지 확인한다. 
      • 예를 들어 bind를 호출할 때, bind 대상 함수가 parameter를 받고 있다면 bind(this) 로만 호출했을 때 에러가 발생한다. => bind(this, "전달할 인자")와 같이 호출해야 하기 때문이다.  
    • strictPropertyInitialization | class로 작업할 때 유용
    • noImplicitThis
    • alwaysStrict | 생성되는 모든 js 파일에 strict 모드를 적용한다. 
12. more options for code qualities  
    • noUnusedLocals | 사용하지 않는 지역 변수(전역 변수X)에 대해 경고를 보여준다. 
    • noUnusedParameters 
    • noImplicitReturns | 함수 안에서 분기처리를 하고 있다면, 모든 분기가 return 키워드를 사용하거나/사용하지 않아야 한다. 즉, 어떤 분기는 return을 사용하고, 어떤 분기는 사용하지 않는 것은 불가능하다.  
    • noFallthroughCasesInSwitch | switch 문에서 break 키워드를 사용하지 않았을 때, 경고를 보여준다. 
13. +) etc
    • jsx | react의 jsx 관련 옵션
    • declaration, declarationMap | d.ts(프로젝트를 라이브러리로 배포할 때?) 관련 옵션