tsconfig.json 설정
tsconfig.json 파일은 TypeScript 프로젝트의 루트 디렉토리에 위치하며 컴파일러 옵션과 프로젝트 구조를 정의하는 중요한 설정 파일입니다.
목적과 중요성
- TypeScript 컴파일러 설정 중앙화
- 프로젝트의 구조와 동작 정의
- 일관된 개발 환경 제공
- IDE와 빌드 도구의 TypeScript 지원 활성화
주요 컴파일러 옵션
strict
: 모든 엄격한 타입 체킹 옵션 활성화
{
"compilerOptions": {
"strict": true
}
}
module
: 모듈 시스템 지정
{
"compilerOptions": {
"module": "commonjs" // 또는 "es6", "esnext" 등
}
}
target
: 컴파일된 JavaScript의 ECMAScript 버전 설정
{
"compilerOptions": {
"target": "es5" // 또는 "es6", "es2017" 등
}
}
outDir
: 컴파일된 파일의 출력 디렉토리 지정
{
"compilerOptions": {
"outDir": "./dist"
}
}
sourceMap
: 소스맵 생성 여부
{
"compilerOptions": {
"sourceMap": true
}
}
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
와 테스트 파일 제외- 필요한 경우 특정 파일이나 폴더만 명시적으로 포함/제외
프로젝트 유형별 설정 예시
- 라이브러리 프로젝트
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"declaration": true,
"outDir": "./lib",
"strict": true
},
"include": ["src"],
"exclude": ["node_modules", "**/__tests__/*"]
}
- 웹 애플리케이션 프로젝트
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"sourceMap": true,
"outDir": "./dist",
"strict": true,
"esModuleInterop": true
},
"include": ["src"]
}
- 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 파일에 정의하고, 각 하위 프로젝트에서 이를 상속받아 필요한 부분만 오버라이드함으로써 설정의 일관성과 유지보수성을 높일 수 있습니다.