타입스크립트 컴파일러 옵션 설명

현재 next + typescript 프로젝트를 벌써 몇 달째 진행하면서 타입스크립트에 대해 조금만 더 제대로 알고 싶다는 생각에 좀 아쉬워서 -한 입 크기로 잘라먹는 타입스크립트- 강의 (인프런)을 수강중이다. 

 

타입스크립트 컴파일러 옵션 설명 

타입스크립트를 설치하면 자동으로 설정이 되다보니 따로 볼 생각을 못했었다. 하지만 당연하다고 여겼던 것들이 다 tsconfig파일에서 컴파일러 옵션으로 지정되어있었기 덕분이였다. 아래 코드에 따른 설명으로, 어떤 옵션으로 인해서 타입스크립트에서 자바스크립트로 자연스럽게 컴파일되는지 알 수 있다. 

 

/tsconfig.json

{
  // 컴파일할 때 사용하는 것들
  "compilerOptions": {
    // ESNext: 최신 문법, (에전 문법을 사용해야만 돌아가는 환경에 유용)
    "target": "ESNext",
    // 모듈 시스템, export, import 부분
    "module": "ESNext",
    // 컴파일 결과로 생성된 js 폴더 위치 /dist/index.js
    "outDir": "dist",
    // 엄격하게 타입관리 ex) 매개변수에 타입지정 필수
    "strict": true,
    // 각각 파일에서 같은 아이디로 변수 선언을 해도 다른 것으로 인식됨, 컴파일시 자동으로 export{} 코드 추가됨
    "moduleDetection": "force",
    // 타입 정의 파일(.d.ts 확장자 같는 파일)의 타입 검사를 생략 , 보통 라이브러리에서 사용됨
    "skipLibCheck": true
  },
  // 터미널에서 tsc src/index.ts 안하고 tsc 만해도 src안의 파일 자동 실행
  "include": ["src"],
}