[TS] tsconfig.json

TypeScript 컴파일러

TypeScript 컴파일러는 TypeScript 파일을 JavaScript 파일로 컴파일링 하는 역할을 한다

컴파일링 설정은 tsconfig.json 파일을 통해 제어할 수 있으며 이 파일 안에는 많은 옵션이 존재한다
(JSON 파일이기 때문에 모든 문자열과 프로퍼티에는 큰 따옴표를 사용하는 것을 잊지말자!)

tsconfig.json 파일 생성하기

$ tsc --init

컴파일링 명령어

감시모드

TypeScript에 변경 사항이 발생하는지 항상 감시하고
파일을 변경하거나 저장하면 자동으로 다시 컴파일 하도록 한다
감시모드 탈출은 Ctrl+C

$ tsc -w 파일명

$ tsc -watch 파일명

모든파일 or 원하는파일만 컴파일링 하기

⋙ 모든파일을 컴파일링 하려는 경우

$ tsc

⋙ 원하는파일만 컴파일링 하려는 경우

$ tsc 원하는파일명

컴파일링 옵션

수많은 컴파일링 옵션중에 가장 흔히 사용되는 몇가지만 체크해보려고 한다

1. files

"files" : ["index.ts", "types.ts"]

프로그램에 포함할 파일 허용 목록을 지정한다
파일의 이름은 tsconfig.json 파일에 포함된 디렉터리를 기준으로 결정된다

├── index.ts               ✓
├── type.ts                ✓
├── test.ts                ⨯
├── apple.ts               ⨯
└── tsconfig.json

2. include, exclude

include" : ["src"]

컴파일링할 파일 이름이나 패턴을 배열로 지정한다
파일 이름은 tsconfig.json 파일에 포함된 디렉터리를 기준으로 결정된다
기본값은 모든파일 이다

├── scripts                ⨯
│   └── index.ts           ⨯
├── src                    ✓
│   ├── test1              ✓
│   │    └── test1.ts      ✓
│   ├── test2              ✓
│   │    └── test2.ts      ✓
│   └── test3              ✓
│        └── test3.ts      ✓
└── tsconfig.json

"exclude" : ["src/test3"]

include 에서 파일을 포함할 때 제외할 파일 이름이나 패턴을 배열로 지정한다
기본값은 node.modules 인데 컴파일링에서 제외하고 싶다면
제외할 파일을 따로 작성하고나서 node.modules도 꼭 작성해줘야 한다

├── scripts                ⨯
│   └── index.ts           ⨯
├── src                    ✓
│   ├── test1              ✓
│   │    └── test1.ts      ✓
│   ├── test2              ✓
│   │    └── test2.ts      ✓
│   └── test3              ⨯
│        └── test3.ts      ⨯
└── tsconfig.json

3. outDir

"outDir"

컴파일된 JavaScript파일을 내보낼 디렉터리를 지정할 수 있다
(내보낼 디렉터리의 이름은 주로 dist를 사용한다)
지정하지 않으면, 자동적으로 TypeScript 파일과 동일한 디렉터리에 생성된다

⋙ outDir 미지정시

├── index.js
├── index.ts
└── tsconfig.json

⋙ "outDir" : "dist" 지정시

├── dist
│   └── index.js
├── index.ts
└── tsconfig.json

4. target

"target"

컴파일링한 JavaScirpt의 버전을 제어하는 옵션이다
ES5 이하인 경우, 화살표 함수나 let const 를 지원하지 않기 때문에 일반함수나 var로 바뀐다
기본값은 ES3 이다

5. strict

"strict"

(true일 때)
TypeScript 전체의 타입 검사, 추가 규칙, 제약 조건이 활성화되어 타입 검사를 보다 엄격하게 만든다
프로그램의 완성도와 정확성을 더욱 보장한다
기본값은 true이다

6. noImplicitAny

"noImplicitAny"

(true일 때)
타입이 표기되어 있지 않아 타입 추론을 할 수 없을 때, 타입을 any로 대체하고 오류를 표시한다
기본값은 strict모드에서 true, 그외에는 false이다

7. strictNullChecks

"strictNullChecks"

(true일 때)
엄격하게 타입을 체크하여 null과 undefined는 특정 타입을 가지게 된다
때문에 구체적인 값을 넣을 곳에 null과 undefined를 사용하면 오류가 발생한다
기본값은 strict모드에서 true, 그외에는 false이다

8. 그 외

"allowJs"

TypeScript에서 JavaScript 파일을 사용할 수 있다

"checkJs"

checkJs는 allowJs와 함께 작동한다
TypeScript에서 JavaScript 파일을 사용할 때
JavaScript 파일에 오류가 있을 경우 문제가 어디에 있는지 알려준다

"sourceMap"

map 파일의 생성 여부를 지시할 수 있다

map 파일
컴파일 된 JavaScript 코드가 TypeScript 코드의 어느부분에 해당하는 지 파악할 수 있다
디버깅(오류나 버그를 찾아내어 수정) 작업에 매우 용이하다

"noEmit"

타입 검사는 계속하지만 컴파일러 출력 파일을 내보내지 않는다
(새로운 JS파일을 만들어내지 않는다)

"noEmitOnError"

오류가 생기면(타입 검사에서 문제가 있으면) 컴파일러 출력 파일을 내보내지 않는다
오류가 없는 경우에만 컴파일된 JavaScript파일을 얻게 된다

---

이외에도 더 많은 옵션이 있으니 공식문서를 참고! 👉🏻 공식문서

보기 쉽게 정리 되어 있는 블로그도 참고! 👉🏻 Inpa Dev님 블로그