tsconfig.json 기초

이번에 JavaScript에서 TypeScript, Express에서 Nest.Js로 새롭게 공부해나가면서 tsconfig.json가 새롭게 등장했다. 쉽게 이해하기 위해 JavaScript에서 어떤것과 유사한지 찾아보니 프로젝트의 설정 파일이다보니 package.json과 가장 유사하다고한다. 앞으로 쭉 사용할 파일이기에 오늘 빠르게 익히고가려 한다.

 

 

 

tsconfig.json란?

tsconfig.json 파일은 tsc --init 명령을 실행하면 생성되는 파일이자 TypeScript 프로젝트의 설정 파일로, TypeScript 컴파일러에게 프로젝트의 컴파일 옵션을 제공한다. 이 파일은 TypeScript 컴파일러가 프로젝트를 어떻게 컴파일할지 설정하는 데 사용된다.

- 기본 구조

일반적인 tsconfig.json 파일 구조

{
  "compilerOptions": {
    /* Compiler options */
  },
  "include": [
    /* 파일 경로 패턴 배열 */
  ],
  "exclude": [
    /* 파일 경로 패턴 배열 */
  ],
  "extends": "extends.json",
  "files": [
    /* 파일 경로 배열 */
  ],
  "references": [
    /* 프로젝트 참조 설정 */
  ]
}

- 주요 속성

• compilerOptions: TypeScript 컴파일러의 옵션을 설정하는 부분. 여기에는 코드의 언어 수준, 출력 형식, 모듈 시스템, 경로 해석 규칙 등이 포함된다.

"compilerOptions": {
  "target": "es5",
  "module": "commonjs",
  "outDir": "./dist",
  "strict": true
}

- target : 해당 TypeScript 프로젝트 내 코드들이 어떤 JavaScript 버전으로 변환을 할 지 정하는 옵션

- module : TypeScript 파일을 컴파일한 후 생성되는 JavaScript 모듈의 형식을 지정

- outDir : 컴파일된 JavaScript 파일이 저장될 출력 디렉터리를 지정

- strict : 엄격한 타입 검사 옵션을 모두 활성화하는 옵션

 

• include: 컴파일할 파일의 경로 패턴을 지정하는 배열. 기본적으로 모든 .ts 파일이 포함된다.

  "include": [
    "src/**/*.ts"
  ]

• exclude: 컴파일하지 않을 파일의 경로 패턴을 지정하는 배열.

  "exclude": [
    "node_modules",
    "dist"
  ]

 

• extends: 다른 설정 파일을 확장할 수 있는 옵션. 확장할 파일의 경로가 들어간다.

  "extends": "baseconfig.json"

 

• files: 직접 지정된 파일들을 컴파일할 때 사용.

  "files": [
    "src/main.ts",
    "src/other.ts"
  ]

 

• references: 프로젝트 간의 참조를 설정할 수 있다. 주로 복잡한 다중 프로젝트 구조에서 사용.

  "references": [
    { "path": "./dependency" }
  ]

 

- 다시 모아서 정리하는 주요 옵션 설명

• target: 컴파일된 JavaScript 코드의 ECMAScript 타겟 버전을 설정.
• module: TypeScript에서 사용할 모듈 코드 생성 방식을 설정 (예: CommonJS, ESNext 등).
• outDir: 컴파일된 JavaScript 파일을 저장할 디렉토리 경로를 설정.
• strict: 엄격한 타입 체크 옵션을 활성화.
• include와 exclude: 컴파일할 파일을 정의하거나 제외할 파일을 설정.
• extends: 다른 설정 파일을 확장하여 설정을 재사용할 수 있다.

- 사용 방법

1. 새로운 TypeScript 프로젝트 시작: TypeScript 프로젝트를 시작할 때 기본적인 tsconfig.json 파일을 생성하고 필요한 옵션을 설정한다.
2. 기존 프로젝트에 적용: 기존 JavaScript 프로젝트를 TypeScript로 변환할 때 필요한 설정을 추가하고 tsconfig.json 파일을 생성하여 컴파일 옵션을 설정한다.
3. 다중 프로젝트 관리: 여러 TypeScript 프로젝트를 효율적으로 관리하기 위해 references 옵션을 사용하여 프로젝트 간의 의존성을 설정할 수 있다.

 

 

기본적인 tsconfig.json 파일에 대해 정리해보았다. 이 파일을 잘 이해하고 적절히 설정함으로써 TypeScript 프로젝트의 컴파일 동작을 원하는 대로 조정하고 개발을 조금 더 유연하고 효율적으로 할 수 있을 것 같다.