tsconfig.json 주요 옵션 살펴보기

jhj46456·2020년 9월 2일
0

📌 Node.js로 백엔드 개발 기준으로 작성되었습니다.

기본 설정

여러분도 아시다시피

tsc --init

을 입력하면 tsconfig.json이 기본값으로 자동 생성됩니다.

일단 기본적으로 주석이 풀린 모습은 다음과 같습니다.

{
  "compilerOptions": {
     "target": "es5",
     "module": "commonjs",
     "strict": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true
  }
}

주석 처리를 안했다는 것은 필수 옵션이라는 뜻일 겁니다.

  • target : 어떤 JS(=ES) 버전으로 컴파일 할지 설정합니다.
  • module : 어떤 모듈 포맷을 사용할지 결정합니다. 자세한 설명은 여기.
  • strict : 타입 체크 옵션을 모두 사용할지 설정합니다.
  • moduleResolution : module 해석 방식을 node/classic 둘 중 하나 설정합니다. 아래서 자세한 설명
  • esModuleInterop

    js로는 모듈을 불러올 때 다음 문법이 가능했습니다.
    import express from "express";

    ts로 모듈을 불러오려면 다음과 같이 작성해야 했습니다.
    import * as express from "express";

    ts로는 js처럼 __importDefault가 안된다는 겁니다.

    그럴 때, js처럼 모듈을 import하기 위해서 esModuleInterop 옵션을 활성화합니다.

  • skipLibCheck : declation file(*.d.ts)들을 검사할지 설정합니다.
  • forceConsistentCasingInFileNames : 같은 파일 일관성 참조 관련 내용인데, 공식 문서를 읽어봐도 설명은 못하겠다.

module-resolution docs
한줄로 요약하면 typescript가 module을 해석하는 순서를 classic / node에 맞게 설정해줍니다.

추가 설정

ts로 실제 서비스 중인 사이드 프로젝트를 작업해보니 몇 가지 설정이 더 필요했습니다.

  • outDir : "./build" 👈 컴파일 되어진 파일이 들어갈 디렉터리 지정
  • lib : Array 👈 컴파일에 포함할 라이브러리를 추가하는데, GraphQL로 작업하는데 DOM이 필요하다고 에러가 발생하여 추가함.
  • sourceMap : true 👈 개인 취향입니다.


    이렇게 컴파일 과정에서 .map을 만들어줍니다.

  • typeRoots : ["./node_modules/@types", "customDirectory"] 👈 패키지가 원하는 타입을 지정하지 않을 경우 사용자 정의 d.ts를 생성하는데, 그 경로를 설정함.

✅ 지금까지 설정한 옵션들은 compilerOptions였습니다.

compilerOptions Object를 탈출한 뒤 다음과 같은 설정이 가능합니다.

단어에서 유추할 수 있듯이 exclude : 제외, include : 포함 ... 일겁니다.

컴파일러는 files, include 둘 다 지정이 안되어있으면 exclude에서 설정된 것을 제외한 모든 .ts, .d.ts, .tsx 파일들을 포함시킵니다.

exclude 옵션이 비어있으면 node_modules, bower_components, jspm_packages, <outDir>을 기본으로 제외합니다.

include와 exclude는 *, **/, ? (glob pattern) 사용이 가능합니다.

지금까지는 include와 exclude를 제외하고 나머지 옵션은 필요한 적이 없었기 때문에 필자는 다음과 같이 설정합니다.

# tsconfig.json
{
  "compilerOptions": { ... },
  "include": ["src/**/*", "types"]
}

0개의 댓글