tsconfig.json

tsconfig.json

tsconfig.json은 TypeScript 컴파일러의 동작을 설정하는 파일입니다.

이 파일을 통해 컴파일 대상 파일, 출력 옵션, 엄격한 타입 검사 옵션 등을 설정할 수 있습니다.

• 기본 구조

  {
    "compilerOptions": {
      // 컴파일러 옵션
    },
    "include": [
      // 컴파일할 파일/디렉토리
    ],
    "exclude": [
      // 컴파일에서 제외할 파일/디렉토리
    ]
  }
  

---

compilerOptions 주요 설정

---

기본 출력 설정

• target : 컴파일된 JavaScript 코드의 ES 버전 설정 // ES5, ES6, ES2015, ESNext 등

• module : 모듈 시스템 설정 // CommonJS, es2022, ES6 등

• outDir : 컴파일된 파일의 출력 디렉토리

• rootDir : 소스 파일의 루트 디렉토리

• sourceMap : .map 파일 생성 여부를 설정하여 디버깅 지원

• declaration : .d.ts 파일 생성 여부를 설정하여 타입 정의 파일을 출력

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "./dist",
    "rootDir": "./src",
    "sourceMap": true,
    "declaration": true
  }
}

---

엄격한 타입 검사

strict를 true로 설정하면, 아래의 개별 옵션들이 모두 활성화됩니다.

• strict : 모든 엄격 모드를 활성화

• noImplicitAny : 타입을 명시하지 않을 경우 any로 추론되는 것을 방지

• strictNullChecks : null과 undefined를 명시적으로 다루도록 강제

• strictPropertyInitialization : 클래스 프로퍼티가 초기화되지 않으면 오류를 발생

• noImplicitThis : this의 타입이 암시적으로 any가 되는 것을 방지 예시

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true
  }
}

---

파일 및 경로 설정

• baseUrl : 경로의 기준 디렉토리를 설정 (import 경로)

• paths : 모듈 경로 별칭을 설정

• typeRoots : TypeScript가 검색할 타입 정의 파일 경로를 설정

• types : 포함할 타입 정의 파일을 명시적으로 설정

• esModuleInterop : CommonJS 모듈을 ES6 모듈처럼 가져올 수 있도록 설정

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@utils/*": ["utils/*"],
      "@components/*": ["components/*"]
    },
    "typeRoots": ["./node_modules/@types"],
    "esModuleInterop": true
  }
}

---

기타 옵션

• skipLibCheck : node_modules나 다른 라이브러리 내부의 타입을 무시, 타입 정의 파일(.d.ts)에서 발생하는 오류를 무시

  컴파일 속도 향상

• forceConsistentCasingInFileNames : 파일 이름 대소문자를 엄격히 검사

• allowJs : .js 파일을 TypeScript에서 컴파일할 수 있도록 허용

• checkJs : .js 파일에서도 타입 검사를 수행

• resolveJsonModule : JSON 파일을 모듈로 가져올 수 있도록 허용

{
  "compilerOptions": {
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "allowJs": true,
    "checkJs": false,
    "resolveJsonModule": true
  }
}

---

include

컴파일할 파일이나 디렉토리의 목록을 설정합니다.

와일드카드(*, **)를 사용하여 여러 파일을 포함시킬 수 있습니다.

• * : 현재 디렉토리 내의 모든 파일
• ** : 하위 디렉토리

{
  "include": ["src/**/*"]
}

---

exclude

컴파일에서 제외할 파일이나 디렉토리의 목록을 설정합니다.

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

---

tsconfig.json 예시

{
  "compilerOptions": {
    // 기본 출력 설정
    "target": "ESNext", // 컴파일된 JS 코드 ES 버전
    "module": "ESNext", // 모듈 시스템
    "esModuleInterop": true,
    "outDir": "./dist", // 컴파일된 파일 출력 디렉토리
    "rootDir": "./src", // 루트 디렉토리

    // strict 타입 검사
    "strict": true, // 엄격 모드

    // 기타 옵션
    "allowJs": true,
    "checkJs": false // js 파일 타입 검사 여부
  },

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

  "exclude": [
    "node_modules", // 외부 라이브러리 제외
    "**/*.test.ts" // 테스트 파일 제외
  ]
}