tsconfig.json : compilerOptions 살펴보기

TypeScript 프로젝트를 구성할 때 가장 중요한 파일은 tsconfig.json입니다. 이 파일에는 TypeScript 컴파일러의 동작을 제어하는 다양한 설정 옵션이 정의되어 있습니다. 이번 포스팅에서는 tsconfig.json의 compilerOptions 섹션을 자세히 살펴보도록 하겠습니다.

compilerOptions 설정 옵션

compilerOptions 섹션에는 TypeScript 컴파일러의 동작을 제어하는 다양한 설정 옵션이 포함되어 있습니다. 주요 옵션들은 다음과 같습니다:

1. target: 생성할 JavaScript 코드의 ECMAScript 버전을 지정합니다. 일반적으로 es5, es6, es2015, es2016, es2017, es2018, es2019, es2020, es2021 등의 값을 사용합니다.
2. module: 생성할 모듈 시스템의 형식을 지정합니다. commonjs, amd, system, umd, es6, es2015 등의 값을 사용할 수 있습니다.
3. lib: 컴파일 시 사용할 기본 라이브러리 집합을 지정합니다. 일반적으로 dom, es6, es2015.promise, es2016, es2017, es2018, es2019, es2020, es2021 등의 값을 사용합니다.
4. allowJs: JavaScript 파일을 컴파일 대상에 포함할지 여부를 지정합니다.
5. checkJs: JavaScript 파일에서 TypeScript 오류 검사를 수행할지 여부를 지정합니다.
6. jsx: JSX 구문 지원 여부와 생성할 JavaScript 코드의 형식을 지정합니다. react, react-native, preserve 등의 값을 사용할 수 있습니다.
7. declaration: 각 모듈에 대한 .d.ts 선언 파일을 생성할지 여부를 지정합니다.
8. declarationMap: .d.ts 파일에 소스 맵을 생성할지 여부를 지정합니다.
9. sourceMap: 디버깅을 위한 소스 맵 파일을 생성할지 여부를 지정합니다.
10. outDir: 컴파일된 JavaScript 파일의 출력 디렉토리를 지정합니다.
11. outFile: 모든 입력 파일을 단일 JavaScript 파일로 컴파일할지 여부와 출력 파일 경로를 지정합니다.
12. rootDir: 입력 파일의 루트 디렉토리를 지정합니다.
13. removeComments: 컴파일된 JavaScript 파일에서 주석을 제거할지 여부를 지정합니다.
14. noEmit: 컴파일된 JavaScript 파일을 생성하지 않도록 지정합니다.
15. strict: 엄격한 타입 검사 옵션들을 활성화할지 여부를 지정합니다.
16. esModuleInterop: ES6 모듈 시스템과 CommonJS 모듈 시스템의 상호 운용성을 활성화합니다.
17. baseUrl, paths, rootDirs: 모듈 해석 규칙을 사용자 정의할 수 있는 옵션들입니다.

이 외에도 다양한 설정 옵션이 있으며, 프로젝트의 요구 사항에 따라 적절히 구성하면 됩니다.

tsconfig.json 예시

다음은 tsconfig.json 파일의 예시입니다:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

이 설정에서는 다음과 같은 동작이 이루어집니다:

• 타겟 ECMAScript 버전은 ES6
• 모듈 시스템은 CommonJS
• 컴파일된 JavaScript 파일은 dist 디렉토리에 출력
• 엄격한 타입 검사 옵션 활성화
• ES6 모듈과 CommonJS 모듈의 상호 운용성 활성화
• src 디렉토리 아래의 모든 파일을 컴파일 대상으로 포함

이처럼 tsconfig.json의 compilerOptions 섹션은 TypeScript 프로젝트의 다양한 동작을 제어할 수 있는 강력한 기능을 제공합니다. 프로젝트의 요구 사항에 맞게 적절히 설정하여 TypeScript 개발 환경을 최적화할 수 있습니다.