실제로 사용한 tsconfig.json를 바탕으로 알아보자.

{
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2022", "DOM"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,

    /* Type Checking */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,

    /* Aliases */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": []
}

세부 옵션 설명

1. 컴파일러 옵션 (compilerOptions)

• "target": "ES2022"
  • 컴파일된 JavaScript 코드가 ES2022 표준을 따르도록 지정합니다.
  • 최신 ECMAScript 기능을 사용할 수 있게 해줍니다.
• "useDefineForClassFields": true
  • 클래스 필드를 정의할 때 최신 ECMAScript의 [[Define]] 동작(정의 시점에 프로퍼티를 직접 정의)을 따릅니다.
  • 기존의 프로퍼티 초기화 방식과 차이가 있으므로, 최신 표준에 맞춰 동작하게 됩니다.
• "module": "ESNext"
  • 모듈 시스템을 최신 ES 모듈(ESM) 방식으로 설정합니다.
  • 트리쉐이킹(tree shaking) 등 최신 모듈 관련 기능을 활용할 수 있습니다.
• "lib": ["ES2022", "DOM"]
  • 컴파일 시 포함할 라이브러리 타입 정의를 지정합니다.
  • "ES2022": ES2022 내장 객체 및 기능에 대한 타입 정의를 사용합니다.
  • "DOM": 브라우저 환경에서 필요한 DOM 관련 API의 타입 정의를 제공합니다.
• "skipLibCheck": true
  • 라이브러리의 타입 선언 파일(.d.ts)의 타입 검사를 건너뜁니다.
  • 컴파일 속도를 높이고, 외부 라이브러리에서 발생할 수 있는 타입 오류로부터 영향을 받지 않게 합니다.

2. Bundler 모드 관련 옵션

이 옵션들은 주로 번들러(Vite, Webpack 등)와 함께 사용될 때 유용합니다.

• "moduleResolution": "bundler"
  • 번들러 환경에 최적화된 모듈 해석 방식을 사용합니다.
  • 파일 경로 및 모듈 해석이 번들러와 일치하게 작동합니다.
• 여기에 대한 추가 설명
• "allowImportingTsExtensions": true
  • import 시에 .ts 확장자를 명시적으로 사용할 수 있도록 허용합니다.
  • ES 모듈 표준에 부합하는 방식입니다.
• "resolveJsonModule": true
  • JSON 파일을 모듈로서 import 할 수 있도록 지원합니다.
  • JSON 데이터를 직접 가져와 사용할 수 있습니다.
• "isolatedModules": true
  • 각 파일을 개별적으로 트랜스파일할 수 있도록 강제합니다.
  • Babel이나 다른 트랜스파일러와 함께 사용할 때, 각 파일이 독립적으로 컴파일되도록 보장합니다.
• "noEmit": true
  • 실제 JavaScript 파일을 생성하지 않습니다.
  • 타입 체크 전용으로 사용하거나, 별도의 트랜스파일러(Babel 등)로 변환할 때 유용합니다.

3. 타입 체크 관련 옵션