tsconfig로 TypeScript 프로젝트를 관리하는 방법

TypeScript 프로젝트를 효과적으로 관리하는 것은 코드 품질과 일관성을 유지하는 데 필수적입니다. tsconfig.json 파일은 TypeScript 프로젝트를 구성하고 관리하는 데 있어 핵심적인 부분입니다. 이를 통해 개발자는 다양한 컴파일러 옵션, 파일 포함, 제외 등을 지정할 수 있습니다. 이 가이드에서는 tsconfig.json을 사용하여 TypeScript 프로젝트를 효율적으로 관리하는 방법을 설명합니다.

tsconfig.json이란 무엇인가요?

tsconfig.json 파일은 TypeScript 컴파일러(tsc)가 TypeScript 프로젝트를 컴파일하는 방법을 결정하는 데 사용하는 구성 파일입니다. 컴파일러 옵션과 프로젝트의 일부인 파일을 지정하는 표준 방식을 제공합니다. tsconfig.json 파일이 디렉토리에 있는 경우 해당 디렉토리를 TypeScript 프로젝트의 루트로 표시합니다.

tsconfig.json 파일 생성

tsconfig.json 파일을 만들려면 터미널에서 다음 명령을 실행하세요.

tsc --init

이 명령은 미리 정의된 옵션 세트가 있는 기본 tsconfig.json 파일을 생성합니다. 생성된 파일은 프로젝트의 특정 요구 사항에 맞게 사용자 정의할 수 있습니다.

기본 tsconfig.json 속성 이해

tsconfig.json 파일에는 TypeScript 프로젝트를 더 잘 관리하기 위해 사용자 정의할 수 있는 여러 속성이 포함되어 있습니다. 가장 일반적으로 사용되는 속성은 다음과 같습니다.

컴파일러 옵션: 프로젝트의 컴파일러 옵션을 지정합니다.
include: 프로젝트에 포함할 파일이나 디렉토리를 지정합니다.
exclude: 프로젝트에서 제외할 파일이나 디렉토리를 지정합니다.
files: 프로젝트에 포함될 개별 파일을 지정합니다.

컴파일러 옵션 구성

compilerOptions 속성은 tsconfig.json 파일에서 가장 중요한 섹션입니다. 이를 통해 개발자는 컴파일 프로세스의 다양한 측면을 제어할 수 있습니다. 일반적으로 사용되는 컴파일러 옵션은 다음과 같습니다.

{
  "compilerOptions": {
    "target": "ES6",               // Specifies the target JavaScript version
    "module": "commonjs",          // Specifies the module system
    "strict": true,                // Enables all strict type-checking options
    "outDir": "./dist",            // Redirects output structure to the directory
    "rootDir": "./src",            // Specifies the root directory of input files
    "esModuleInterop": true,       // Enables emit interoperability between CommonJS and ES Modules
    "forceConsistentCasingInFileNames": true // Disallows inconsistently-cased references to the same file
  }
}

이러한 옵션은 프로젝트 요구 사항에 따라 사용자 정의할 수 있습니다. 예를 들어, target을 ES5으로 변경하면 이전 브라우저와 호환되는 JavaScript가 출력됩니다.

파일 포함 및 제외

TypeScript 프로젝트에서는 컴파일 중에 어떤 파일을 포함하거나 제외할지 제어하는 것이 중요합니다. tsconfig.json의 include 및 exclude 속성이 이 목적으로 사용됩니다.

{
  "include": ["src/**/*"],    // Includes all TypeScript files in the src folder
  "exclude": ["node_modules", "**/*.spec.ts"] // Excludes node_modules and all spec files
}

위 구성에는 src 디렉터리와 하위 디렉터리의 모든 TypeScript 파일이 포함되고, node_modules 디렉터리의 파일과 .spec.ts 확장자가 있는 파일은 제외됩니다.

파일 속성 사용

files 속성은 컴파일에 개별 파일을 포함하는 데 사용됩니다. 이는 특정 파일 세트만 컴파일해야 할 때 유용할 수 있습니다.

{
  "files": ["src/index.ts", "src/app.ts"]
}

이 예에서는 src 디렉토리의 index.ts 및 app.ts 파일만 컴파일됩니다.

tsconfig 파일 확장

TypeScript는 extends 속성을 사용하여 다른 tsconfig.json 파일을 확장할 수 있습니다. 이는 여러 프로젝트 또는 하위 프로젝트에서 공통 기본 구성을 공유하는 데 유용합니다.

{
  "extends": "./base.tsconfig.json",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

이 예에서 현재 tsconfig.json 파일은 base.tsconfig.json 파일을 확장하고 outDir 옵션을 재정의합니다.

결론

tsconfig.json로 TypeScript 프로젝트를 관리하면 컴파일 프로세스에 대한 뛰어난 유연성과 제어가 제공됩니다. tsconfig.json의 다양한 속성(예: compilerOptions, include, exclude, files)을 이해하고 활용하면 TypeScript 프로젝트를 보다 효율적이고 효과적으로 관리할 수 있습니다. tsconfig 파일을 확장할 수 있는 기능은 프로젝트 구성과 재사용성을 개선하는 데에도 도움이 됩니다.

타입스크립트 tsconfig 컴파일러 옵션 프로젝트 포함 제외 파일 모듈 대상 엄격 출력 제어 관리