tsconfig.json이란?

tsconfig.json이란? (What is a tsconfig.json)

디렉터리에 tsconfig.json 파일이 있으면 컴파일러는 그 디렉터리를 TypeScript 프로젝트의 루트로 인식해요. 이 파일은 프로젝트의 루트 파일 목록과 컴파일할 때 필요한 컴파일러 옵션을 지정합니다. JavaScript 프로젝트는 거의 같은 역할을 하는 jsconfig.json을 대신 쓸 수 있는데, 기본적으로 JavaScript 관련 컴파일러 플래그 몇 개가 켜져 있다는 점만 달라요.

출처: TypeScript 핸드북

개요 (Overview)

프로젝트가 컴파일되는 방식은 크게 두 가지입니다.

`tsconfig.json` 또는 `jsconfig.json` 사용하기

입력 파일 없이 tsc를 실행하면, 컴파일러가 현재 디렉터리에서 시작해 상위 디렉터리로 거슬러 올라가며 tsconfig.json을 찾습니다.
입력 파일 없이 tsconfig.json 파일이 들어 있는 디렉터리 경로, 또는 유효한 설정이 담긴 .json 파일 경로를 --project(줄여서 -p) 옵션으로 지정해 실행할 수도 있어요.

명령줄에 입력 파일을 지정하면 tsconfig.json 파일은 무시됩니다.

예시

tsconfig.json 파일의 실제 예시를 볼게요.

files 속성 사용하기

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true
  },
  "files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "emitter.ts",
    "program.ts",
    "commandLineParser.ts",
    "tsc.ts",
    "diagnosticInformationMap.generated.ts"
  ]
}

include와 exclude 속성 사용하기

{
  "compilerOptions": {
    "module": "system",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "outFile": "../../built/local/tsc.js",
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["**/*.spec.ts"]
}

TSConfig 베이스

코드를 실행하려는 JavaScript 런타임 환경에 따라, github.com/tsconfig/bases에서 쓸 수 있는 베이스 설정이 이미 마련되어 있어요. 이들은 여러분의 프로젝트가 상속하는 tsconfig.json 파일로, 런타임 지원 부분을 알아서 처리해 주기 때문에 tsconfig.json이 훨씬 간결해집니다.

예를 들어 Node.js 12 이상을 쓰는 프로젝트라면 npm 모듈 @tsconfig/node12를 쓰면 돼요:

{
  "extends": "@tsconfig/node12/tsconfig.json",

  "compilerOptions": {
    "preserveConstEnums": true
  },

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

이러면 tsconfig.json이 런타임의 온갖 세부 사항 대신, 프로젝트만의 고유한 선택에 집중할 수 있어요. 이미 만들어진 tsconfig 베이스가 몇 개 있고, 커뮤니티가 다양한 환경에 맞춰 더 추가해 주길 기대하고 있습니다.

세부 사항

"compilerOptions" 속성은 생략할 수 있는데, 생략하면 컴파일러 기본값이 사용됩니다. 지원되는 컴파일러 옵션 전체 목록을 확인해 보세요.

TSConfig 레퍼런스

수백 가지 설정 옵션을 더 배우고 싶다면 TSConfig 참조 문서를 보면 돼요.

스키마

tsconfig.json의 스키마는 JSON Schema Store에서 확인할 수 있어요.

tsconfig.json이란?