tsconfig.json

최종 수정 : 2024-05-27

tsconfig.json 파일 불러오기

매번 설정하기에는 귗낳고, 여러 프로젝트를 개발한다면 항상 같은 설정을 사용하고 싶을 것이다. 이럴 때마다 복사/붙여넣기 하는 건 유지 보수하는데 좋지 않다. 이럴 때 사용할 수 있는 옵션이 extends이다.

// tsconfig.json
{
  "extends": "<설정 파일 경로>"
}

---

꼭 알아야 할 컴파일러 옵션들

1. target : 어떤 ECMAScript 버전으로 변환할 지

타입스크립트 코드는 빌드해서 자바스크립트로 변환한다. 이때 변환할 JS의 버전을 정할 수 있다.

 

2. module : 어떤 방식으로 모듈을 만들지

크게 두 가지 방식이 있다. ES6부터 도입된 import/export 문법을 사용하는 ESM(ECMAScript Module) 방식과 Node.js에서 기본적으로 하용하는 CJS(CommonJS) 방식이 있다.

 

이 옵션에서 ESM을 사용하려면, es로 시작하는 값을 쓰면 되고, CJS를 사용하려면 commonjs라고 쓰면 된다. 보통 Node.js 환경에서는 CJS를 사용하고, 프론트엔드 개발을 할 때는 보통 번들러에서 모듈을 알아서 처리해 주기 때문에 상관없이 쓸 수 있다.

 

3. exModuleInterop : ES 모듈을 안전하게 사용

ESM 문법에서 import * as moment from 'moment' 라든가 import moment from 'momet' 라는 문법은 서로 다르다. 이 옵션을 false로 하면 CJS로 변환했을 때 두 코드는 const moment = require('moment')로 변환된다. 안전하게 사용하려면 이 옵션은 true로 해놓는 게 좋다.

 

4. forceConsistentCasingInFileNames : 파일의 대소문자 구분하기

이 옵션은 반드시 true로 해 놓는 게 좋다.

 

5. strict : 엄격한 규칙 활성화

이 옵션을 켜면 strict 와 관련된 여러 규칙들을 한꺼번에 활설화시킬 수 있다. 이들 중 대표적으로 두 가지는 알고 가면 좋다.

• noImplicitAny : 아무 타입을 정의하지 않고, 타입 추론도 되지 않는 상태 즉, 자바스크립트 코드처럼 타입 없이 사용하는 것을 impliciy any라고 한다.

function printSize(proucet) {
   ~~ 타입 정의도 없고 추론할 수도 없다.
   console.log(product.size);
}

 

새로 시작하는 타입스크립트 프로젝트라면 무조건 켜는 것이 좋지만, 기존 JS 프로젝트를 TS로 옮기는 중이라면 끄는 것도 좋다. 다음과 같이 설정하면, strict 규칙을 한꺼번에 설정하지만 noImplicitAny는 설정하지 않을 수 있다.

"strict": true,
"noImplicitAny": false,

• strictNullChecks : null이 될 가능성이 있다면 반드시 처리하도록 하는 옵션이다. 되도록 켜는 것을 추천한다. 다음 코드는 strict null check를 할 때 오류가 난다. 하지만 strictNullChecks가 꺼져 있다면 타입 오류가 나지는 않지만 실행하는 도중에 num 변수에 null 값이 들어간다면 런타임 오류가 발생한다.

let num: number | null;
// ...
num -= 1;
~~~

 

되도록이면 strictNullChecks를 켜고 반드시 null check하는 것을 권장한다.

let num: number | null;
// ...
if (num !== null) {
  num -= 1;
}

 

6. skipLibCheck : 설치한 패키지의 타입 검사하지 않기

node_modules 폴더에 설치된 패키지들의 타입 검사를 하지 않는 옵션이다. 패키지 개발 과정에서 대부분 타임 겁사가 이뤄지므로 중복으로 하지 않아도된다. 그래서 이 옵션을 활성화시키는 것을 추천한다.

 

7. rootDir : 최상위 폴더

타입스크립트 컴파일러가 처리할 타입스크립트 파일들의 최상위 폴더를 정하는 옵션이다. 기본 값으로는 처리하는 파일들의 경로를 종합해서 최상위 폴더를 정한다. 만약 tsconfig.json 파일과 같은 폴더에 있는 src 폴더를 최상위 폴더로 정하고 싶다면 다음과 같이 작성하면 된다.

{
  "compilerOptions": {
    "rootDir": "src",
  }
}

 

8. outDir : 자바스크립트 파일을 생성할 폴더

outDir에 지정된 폴더 안에다가 rootDir의 디렉토리 구조에 따라서 자바스크립트 파일을 만든다. 값을 지정하지 않으면 소스코드 파일과 같은 폴더에 자바스크립트 파일을 만든다.

{
  "compilerOptions": {
    "outDir": "dist",
  }
}

 

9. resolveJsonModule : JSON 파일 임포트하기

.json 파일을 임포트해서 사용하고 싶다면 이 옵션을 활성화시켜야 한다.

 

10. include와 exclude

tsc로 프랜스파일할 때 포함할 경로(include)와 포함하지 않을 경로(exclude)를 정해줄 수 있다. 배열로 경로 패턴을 작성하면 된다. **/* 라는 코드는 아래의 모든 폴더, 모든 파일을 의미한다. 이런 패턴을 Glob 패턴이라 한다.

{
  "compilerOptions": {
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "module": "commonjs",                                /* Specify what module code is generated. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
  "include": ["src/**/*", "tests/**/*"],
  "exclude": ["bin/**/*"],
}

 

11. jsx

 

12. moduleDetection

 

13. ts-node