tsconfig.json

`tsconfig.json` 이란?

타입스크립트 컴파일러가 실행될 때 필요한 옵션을 지정하는 파일이다. 이 파일은 TypeScript 프로젝트의 루트경로에 위치하며, tsc --init 명령어를 통해 생성한다. tsc명령어의 -p 옵션을 사용해 파일의 위치를 지정할 수도 있다.

.
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── main.ts
│   └── system.ts
└── tsconfig.json

compilerOptions

속성 : `target`

컴파일된 코드가 어떤 환경에서 실행될지 지정한다. 예를 들어 es5로 명시했다면 es6식의 코드가 es5식으로 변환된다. 프로젝트 특성에 따라 지정하면 된다. es6 옵션은 es2015 옵션과 동일하다.

"compilerOptions": {
    "target": "es5"
  }

속성 : `lib`

바닐라 자바스크립트에서 지원하는 DOM API등 feature를 타입스크립트에서도 지정해주어야 한다. 물론 target에 지정한 속성에 따라 관련 feature가 자동으로 지원된다.

"compilerOptions": {
    "target": "es6",
    "lib": ["dom","es6", "dom.iterable","scripthost"] // es6 lib
  }

속성: `module`

모듈 시스템을 지정한다.

commonjs의 경우 export default Sample을 exports.default = helloWorld로 변환해준다.
es2015의 경우 export default Sample을 따로 변환하지 않는다.
esModuleInterop 가 true라면, commonjs 형태의 모듈을 es2015 형태로 불러올 수 있게 지원한다.
- require형태(commonjs)로 불러오던 모듈을 import 형태(es6)로 변환한다.

"compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "esModuleInterop": true
  }

속성 : `strict`

모든 타입 체킹을 활성화하는 것으로, 데이터타입을 좀더 강하게 검증하겠다는 옵션이다.
strict 옵션을 활성화하면 타입에 대한 명시를 보다 명확하게 처리할 수 있다.
- 다음 서브 옵션들이 모두 활성화된다.

  "noImplicitAny": true, // 타입을 지정하지 않은 경우 any로 자동화된 타입추론을 시도하지 않는다. 타입선언을 좀더 명확히 할 수 있다는 장점.
  "noImplicitThis": true,
  "alwaysStrict": true,
  "strictBindCallApply": true,
  "strictNullChecks": true,
  "strictFunctionTypes": true,
  "strictPropertyInitialization": true

"compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "esModuleInterop": true,
    "strict": true
  }

속성 : `sourceMap`

개발자도구에서 ts 파일을 확인하고, 해당 파일에서 중단점을 설정할 수 있게해주는 옵션이다.

"compilerOptions": {
    "sourceMap": true
  }

속성 : `outDir`, `rootDir`

outDir은 컴파일된 파일이 저장되는 경로를 지정한다. 아래와 같이 설정하면 컴파일된 js파일이 dist 폴더에 저장된다. rootDir은 소스파일을 스캐닝하기 시작할 위치를 지정한다. 해당위치에서부터 src 폴더의 구조를 그대로 outDir에 복사한다.

"compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src"
  }

위와 같은 세팅으로 타입스크립트 컴파일을 시도했다면, dist 폴더 하위의 자바스크립트파일도 동일한 디렉토리 구조로 복사된다.

.
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── main.ts
│   └── system.ts
│   ├── sub
│   │   ├── sub1.ts
│   │   └── sub1.ts
└── tsconfig.json

dist $ tree
src
│
├── main.js
└── system.js
└── sub
    ├── sub1.js
    └── sub2.js

속성 : `noUnusedLocals`,`noUnusedParameters`,`noImplicitReturns`

코드 퀄리티와 관련된 추가적인 옵션들이다. 선언된 값이 사용되지 않거나, 함수 파라미터값이 사용되지 않거나, 명시적인 반환값이 없는 경우를 허용하지 않는다.

"compilerOptions": {
    "noUnusedLocals": true,                
    "noUnusedParameters": true,            
    "noImplicitReturns": true,             
 }

Other options

속성 : `include`, `exclude`

include는 탐색할 파일 패턴을, exclude는 제외할 파일 패턴을 명시한다.

**/ 재귀적으로 모든 하위 디렉토리와 매칭한다.
* 는 타입스크립트가 지원하는 확장자 목록이 포함된다.
- ts,tsx, .d.ts
- allowJs 속성값이 true라면 js,jsx 도 포함
files, include,exclude 속성 모두 아무것도 명시되어 있지 않을경우 기본적으로 타입스크립트가 지원하는 파일만 포함시킨다.
files, include 가 둘다 명시되어 있으면 두 속성의 합집합으로 처리한다.
files, include에 명시되지 않았더라도, files, include에 명시된 파일이 해당 파일을 참조한다면 자동으로 포함된다.
- 제외시키려면 exclude에 포함시켜야 한다.

{
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules", // default
        "**/*.spec.ts"
    ]
}

속성 : `files`

타입스크립트 컴파일러가 탐색할 타입스크립트 파일을 탐색한다. files 속성에는 상대경로나, 절대경로로 파일을 남긴다. 자주 사용하는 옵션은 아니다.

{
    "files" : [
        "main.ts",
        "system.ts"
    ]
}

tsconfig.json 이란?

compilerOptions

속성 : target

속성 : lib

속성: module

속성 : strict

속성 : sourceMap

속성 : outDir, rootDir

속성 : noUnusedLocals,noUnusedParameters,noImplicitReturns