빠른 설정

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "noEmit": true
  }
}

설정 구조

tsconfig에서 먼저 보는 기본 축은 아래 다섯 가지입니다.

• 검사 강도: strict
• 출력 환경: target, module
• emit 여부: noEmit
• 파일 범위: include, exclude
• 공통 설정 상속: extends

1) 검사 강도를 보면 strict

strict는 여러 안전장치를 한 번에 켜는 대표 스위치입니다. 프로젝트의 타입 엄격도를 파악할 때 가장 먼저 보는 옵션입니다.

{
  "compilerOptions": {
    "strict": true
  }
}

2) 출력 환경을 보면 target과 module

target은 어떤 JavaScript 문법 수준으로 출력할지, module은 어떤 모듈 시스템을 기준으로 삼을지 보여 줍니다.

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext"
  }
}

이 둘만 읽어도 런타임 환경과 번들러 전제의 상당 부분을 파악할 수 있습니다.

3) TypeScript가 실제 JS를 내보내는지 보면 noEmit

앱에 따라 TypeScript가 JS를 직접 출력할 수도 있고, 번들러에게 맡기고 타입 검사만 할 수도 있습니다. noEmit은 그 차이를 바로 드러냅니다.

{
  "compilerOptions": {
    "noEmit": true
  }
}

4) 검사 파일 범위는 include와 exclude

어떤 파일이 검사 대상에 들어오는지는 실제 체감에 큰 영향을 줍니다. 설정이 맞지 않으면 "왜 이 파일은 검사되지 않지?" 같은 혼란이 생기기 쉽습니다.

{
  "include": ["src", "tests"],
  "exclude": ["dist", "node_modules"]
}

5) 여러 프로젝트가 있으면 extends로 공통 정책을 묶는다

앱, 패키지, 테스트 설정이 나뉘어 있으면 공통 옵션을 한 파일에 두고 extends로 잇는 편이 관리하기 쉽습니다.

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "noEmit": true
  }
}

6) 온라인 예제보다 현재 도구 체인과의 정합성이 더 중요하다

tsconfig 예제를 그대로 가져다 붙이기보다, 현재 런타임/번들러/테스트 환경과 맞는지 보는 편이 중요합니다. TypeScript 옵션은 프로젝트 외부 도구와 같이 움직이기 때문입니다.

어디서 무엇을 켤까

• 타입 검사 강도를 본다: strict
• 출력 JS 문법 수준을 본다: target
• 모듈 방식을 본다: module
• TS가 직접 출력하는지 본다: noEmit
• 검사 파일 범위를 본다: include / exclude
• 공통 설정을 공유한다: extends

주의할 점

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES2022",
    "strict": true
  }
}