[TypeScript] tsconfig.json 파일이란? (What is a tsconfig.json)

Documentation - What is a tsconfig.json

 

1. Overview

tsconfig.json 파일이 위치한 디렉토리는 TypeScript 프로젝트의 루트 디렉토리가 된다. tsconfig.json 파일은 해당 프로젝트를 컴파일 하기 위해 필요한 루트 파일들과 각종 컴파일러 옵션들을 설정한다.

 

JavaScript 프로젝트의 경우 jsconfig.json 파일을 대신 사용할 수 있는데, 이는 사실 tsconfig.json과 동작 방식이 거의 비슷하다. 다만 JavaScript와 관련된 컴파일러 플래그들을 가지고 있을 뿐이다.

 

TypeScript 프로젝트는 다음과 같은 두 가지 방식 중 하나에 의해 컴파일이 이뤄진다.

 

2. Using tsconfig.json or jsconfig.json

1. 입력 파일 없이 tsc를 실행한다. 이 경우, 컴파일러는 현재 경로부터 시작해서 상위로 올라가며 tsconfig.json 파일을 탐색한다.
2. 입력 파일 없이 --project(또는 -p) 옵션을 통해 tsconfig.json 파일이 존재하는 경로 또는 설정 내용을 담은 또 다른 유효한 .json 파일의 경로를 지정하면서 tsc를 실행한다. 

 

※ 단, 입력 파일들이 커맨드 라인에 전달되는 경우 tsconfig.json 파일은 완전히 무시된다.

 

3. Example

• files 프로퍼티를 지정한 tsconfig.json 파일

{
    "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 프로퍼티를 지정한 tsconfig.json 파일

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

 

4. TSConfig Base

코드를 실행시키고자 하는 JavaScript 런타임이 무엇이냐에 따라, 기본적으로 사용할 수 있는 설정 파일을 여기에서 찾을 수 있다. 이를 상속하여 프로젝트의 tsconfig.json 파일을 작성하면, 해당 런타임의 지원을 적절히 핸들링함으로써 tsconfig.json 파일의 내용을 간략화 시킬 수 있다.

 

예를 들어, Node.js 12 혹은 그 이상 버전을 사용하는 프로젝트의 경우, @tsconfig/node12 npm 모듈을 활용하여 다음과 같이 tsconfig.json 파일을 작성할 수 있다. 내용이 굉장히 간결해진다.

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

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

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

 

이는 tsconfig.json 파일이 해당 프로젝트에서 특징적인 설정들에만 집중할 수 있게 한다. 즉, 모든 런타임 메커니즘을 고려할 필요가 없어지는 것이다. 이러한 용도로 사용할 수 있는 기본적인 설정 파일들이 이미 몇 개 마련되어 있고, 앞으로 커뮤니티에서 더 다양한 환경들에 대한 설정 파일들을 제공해줄 것을 바라고 있는 상황이다. 다음은 현재 제공되고 있는 몇 개의 대표적인 설정 파일들이다.

 

• Recommended
• Node 10
• Node 12
• Deno
• React Native
• Svelte

 

5. Details

tsconfig.json 파일에서 compileOptions 프로퍼티는 생략할 수 있다. 그 경우에는 컴파일 옵션이 기본값으로 알아서 설정된다. 지원되는 모든 컴파일 옵션들은 이곳을 참고하기 바란다.