icon안동민 개발노트

컴파일러 옵션 상세 설명


 TypeScript 컴파일러 옵션은 코드의 타입 체킹, 모듈 해석, 출력 생성 등 다양한 측면을 제어합니다.

 이 옵션들을 이해하고 적절히 설정하는 것은 효과적인 TypeScript 개발에 중요합니다.

타입 체킹 관련 옵션

 1. noImplicitAny

  • 의미 : 암시적 'any' 타입 사용 시 오류 발생
  • 영향 : 더 엄격한 타입 체킹 강제
{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

 2. strictNullChecks

  • 의미 : null과 undefined를 모든 타입에서 제외
  • 영향 : null/undefined 관련 오류 방지
{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

 3. strict

  • 의미 : 모든 엄격한 타입 체킹 옵션 활성화
  • 영향 : 가장 높은 수준의 타입 안정성 제공
{
  "compilerOptions": {
    "strict": true
  }
}

모듈 관련 옵션

 1. moduleResolution

  • 의미 : 모듈 해석 전략 설정
  • 옵션 : "node" (권장) 또는 "classic"
{
  "compilerOptions": {
    "moduleResolution": "node"
  }
}

 2. esModuleInterop

  • 의미 : CommonJS 모듈을 ES6 모듈처럼 가져올 수 있게 함
  • 영향 : 일관된 모듈 사용 문법 가능
{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

 3. module

  • 의미 : 생성될 모듈 코드의 종류 지정
  • 옵션 : "commonjs", "es6", "esnext" 등
{
  "compilerOptions": {
    "module": "es6"
  }
}

출력 관련 옵션

 1. outDir

  • 의미 : 컴파일된 파일의 출력 디렉토리 지정
  • 영향 : 소스 파일과 출력 파일 구조 분리
{
  "compilerOptions": {
    "outDir": "./dist"
  }
}

 2. outFile

  • 의미 : 모든 출력을 단일 파일로 연결
  • 사용 : 주로 AMD 모듈 시스템에서 사용
{
  "compilerOptions": {
    "outFile": "./dist/bundle.js"
  }
}

 3. declaration

  • 의미 : 각 TypeScript 파일에 대한 .d.ts 파일 생성
  • 영향 : 라이브러리 개발 시 유용
{
  "compilerOptions": {
    "declaration": true
  }
}

소스맵 관련 옵션

 1. sourceMap

  • 의미 : 소스맵 파일 생성
  • 영향 : 컴파일된 JavaScript를 원본 TypeScript로 매핑하여 디버깅 용이
{
  "compilerOptions": {
    "sourceMap": true
  }
}

 2. inlineSourceMap

  • 의미 : 별도의 파일 대신 소스맵을 출력 파일에 직접 포함
  • 사용 : 단일 파일 배포 시 유용
{
  "compilerOptions": {
    "inlineSourceMap": true
  }
}

실험적 옵션

 1. experimentalDecorators

  • 의미 : 데코레이터 지원 활성화
  • 주의사항 : 실험적 기능이므로 향후 변경될 수 있음
{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

 2. emitDecoratorMetadata

  • 의미 : 데코레이터를 위한 타입 메타데이터 방출
  • 사용 : 주로 의존성 주입 프레임워크에서 사용
{
  "compilerOptions": {
    "emitDecoratorMetadata": true
  }
}

고급 모듈 해석 옵션

 1. baseUrl

  • 의미 : 모듈 해석을 위한 기본 디렉토리 설정
  • 영향 : 상대 경로 임포트 단순화
{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

 2. paths

  • 의미 : 모듈 이름에 대한 경로 매핑 설정
  • 사용 : 별칭을 사용한 임포트 단순화
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@utils/*": ["src/utils/*"],
      "@models/*": ["src/models/*"]
    }
  }
}

 컴파일러 옵션들은 TypeScript 프로젝트의 동작을 세밀하게 제어할 수 있게 해줍니다.

 moduleResolution을 "node"로 설정하면 node.js 스타일의 모듈 해석을 사용하게 되며, 이는 대부분의 현대적인 TypeScript 프로젝트에 권장됩니다.

 esModuleInterop 옵션은 CommonJS 모듈을 ES6 스타일로 가져올 수 있게 해주어, 모듈 사용의 일관성을 높여줍니다.

 출력 관련 옵션들은 컴파일된 JavaScript 파일의 생성 방식을 제어합니다. outDir을 사용하면 컴파일된 파일들을 별도의 디렉토리에 깔끔하게 정리할 수 있습니다.

 declaration 옵션은 라이브러리 개발 시 특히 유용하며, 사용자에게 타입 정보를 제공할 수 있게 해줍니다.

 소스맵 관련 옵션들은 디버깅 경험을 크게 향상시킵니다. sourceMap을 활성화하면 브라우저 개발자 도구에서 직접 TypeScript 코드를 디버깅할 수 있게 되어, 개발 효율성이 높아집니다.

 고급 모듈 해석 옵션인 baseUrlpaths는 복잡한 디렉토리 구조에서도 모듈 임포트를 간단하고 일관되게 관리할 수 있습니다.