[프로젝트]TypeScript tsconfig 설정

이번에 프로젝트 초기세팅을 하면서 TS 설정을 CNA를 그대로 가져와썻지만 설정항목이 무엇인지 확인하고 쓰고자 알아보았다.

{
  "compilerOptions": {
    "target": "esnext", //ecma version
    "lib": ["dom", "dom.iterable", "esnext"], // 컴파일에 포함될 라이브러리 목록
    "allowJs": true, // js파일 ts에 import 가능 여부
    "skipLibCheck": true, // *.d.ts 파일 type검사 skip
    "strict": true, // 모든 stric 타입 검사 여부
    "forceConsistentCasingInFileNames": true, //동일 파일 참조에 대해 일관성 없는 대소문자를 비활성화
    "noEmit": true, // 컴파일러가 JavaScript 파일 등의 출력 파일들을 만들어 내지 않도록 하는 설정
    "esModuleInterop": true, //런타임 Babel 생태계와의 호환성
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true, //확장자가 .json인 모듈의 import를 허용하는 설정
    "isolatedModules": true, //추가 검사를 수행하여 별도의 컴파일 (예를 들어 트랜스파일된 모듈 혹은 @babel/plugin-transform-typescript) 이 안전한지 확인
    "jsx": "preserve" //JSX 코드를 어떻게 컴파일할지 결정(preserve : .jsx 파일로 컴파일 된다. (JSX 코드가 그대로 유지됨))
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

기타 설정은 설명을 보고 알겠는데 noEmit과 esModuleInterop 두가지는 정말 와닿지가 않더라... 결국 일단 CNA설정을 따라가는걸로 했는데 설명을 봐도 모르겠으니 아직 내 지식이 부족함을 어쩌겠냐마는... 역시 배움에는 끝이없다 ㅠㅠ

📚 tsconfig 참조 링크 입니다.

• 자세한 옵션 설명
• 정리 잘된 옵션 설명
• lib옵션 관련 블로그