icon안동민 개발노트

tsconfig.json 설정

 tsconfig.json 파일은 TypeScript 프로젝트의 루트 디렉토리에 위치하며 컴파일러 옵션과 프로젝트 구조를 정의하는 중요한 설정 파일입니다.

목적과 중요성

  • TypeScript 컴파일러 설정 중앙화
  • 프로젝트의 구조와 동작 정의
  • 일관된 개발 환경 제공
  • IDE와 빌드 도구의 TypeScript 지원 활성화

주요 컴파일러 옵션

  1. strict : 모든 엄격한 타입 체킹 옵션 활성화
{
  "compilerOptions": {
    "strict": true
  }
}
  1. module : 모듈 시스템 지정
{
  "compilerOptions": {
    "module": "commonjs" // 또는 "es6", "esnext" 등
  }
}
  1. target : 컴파일된 JavaScript의 ECMAScript 버전 설정
{
  "compilerOptions": {
    "target": "es5" // 또는 "es6", "es2017" 등
  }
}
  1. outDir : 컴파일된 파일의 출력 디렉토리 지정
{
  "compilerOptions": {
    "outDir": "./dist"
  }
}
  1. sourceMap : 소스맵 생성 여부
{
  "compilerOptions": {
    "sourceMap": true
  }
}
  1. esModuleInterop : CommonJS 모듈을 ES6 모듈 형식으로 가져올 수 있게 함
{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

설정 상속

 extends를 사용하여 기본 설정을 상속받고 확장할 수 있습니다.

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

 장점

  • 설정 재사용성 향상
  • 프로젝트 간 일관성 유지
  • 유지보수 용이성 증가

파일 관리

 include와 exclude 옵션을 사용하여 컴파일 대상 파일을 관리합니다.

{
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

 전략

  • src 폴더 내 모든 TypeScript 파일 포함
  • node_modules와 테스트 파일 제외
  • 필요한 경우 특정 파일이나 폴더만 명시적으로 포함/제외

프로젝트 유형별 설정 예시

  1. 라이브러리 프로젝트
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./lib",
    "strict": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "**/__tests__/*"]
}
  1. 웹 애플리케이션 프로젝트
{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}
  1. Node.js 애플리케이션
{
  "compilerOptions": {
    "target": "es2018",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

Best Practices

 1. 엄격한 타입 체킹 활성화

  • "strict": true 설정으로 타입 안정성 강화

 2. 모듈 해석 최적화

  • "moduleResolution": "node" 사용으로 Node.js 스타일 모듈 해석

 3. 소스맵 생성

  • 디버깅을 위해 "sourceMap": true 설정

 4. 일관된 코드 스타일

  • "forceConsistentCasingInFileNames": true로 파일 이름 대소문자 일관성 강제

 5. 미사용 코드 체크

  • "noUnusedLocals": true, "noUnusedParameters": true로 미사용 변수 및 매개변수 체크

 6. 암시적 any 타입 방지

  • "noImplicitAny": true로 명시적 타입 선언 강제

 7. 프로젝트 구조 반영

  • include와 exclude를 사용하여 명확한 파일 범위 지정

 8. 환경별 설정 분리

  • 개발, 프로덕션 등 환경별 tsconfig 파일 생성 (예 : tsconfig.dev.json, tsconfig.prod.json)

 9. 라이브러리 타입 선언 최적화

  • "types": ["node", "jest"]와 같이 필요한 타입만 명시적으로 포함

 10. 정기적인 설정 리뷰

  • 새로운 TypeScript 버전 출시 시 설정 검토 및 업데이트

 tsconfig.json 파일은 TypeScript 프로젝트의 중추적인 역할을 합니다. 이 파일을 통해 개발자는 프로젝트의 컴파일 방식, 타입 체킹 수준, 모듈 시스템 등 핵심적인 동작을 정의할 수 있습니다.

 특히 strict 모드의 활성화는 TypeScript의 강력한 타입 시스템을 최대한 활용할 수 있게 해줍니다.

 또한 module과 target 설정을 통해 다양한 실행 환경에 맞는 코드를 생성할 수 있어, 크로스 플랫폼 개발에 유용합니다.

 설정 상속 기능은 대규모 프로젝트나 마이크로서비스 아키텍처에서 특히 유용합니다. 공통 설정을 기본 tsconfig 파일에 정의하고, 각 하위 프로젝트에서 이를 상속받아 필요한 부분만 오버라이드함으로써 설정의 일관성과 유지보수성을 높일 수 있습니다.

이전으로다음으로