🔎 tsconfig.json가 뭔데

그거 어떻게 하는건데.

📌 tsconfig.json 존재의 이유

이 파일은 타입스크립트 ts 파일들을 .js 파일로 변환할 때
어떻게 변환할 것인지 자세하게 명시해둔 파일이라고 생각하면 된다.

사실 자세한 건 공식 홈페이지에 다 나와있다.
https://www.typescriptlang.org/tsconfig
근데 나같이 체리픽만 하고싶은 사람을 위해 포스팅할 예정이다.

tsconfig.json 파일을 보면 보통 다음과 같이 구성이 되어있을 것이다.

{
  "compilerOptions":{ ... },
  "files" : { ... },
  "include" : { ... },
  "exclude" : { ... },
}

📌 각 항목이 명시 하는 것

• compilerOptions : 실제 컴파일 할 경우 적용되는 옵션들
• files : 원하는 특정 파일만 컴파일 시킬 수 있는 옵션
• include : 컴파일할 파일 경로를 설정
• exclude : 컴파일 대상을 제외하는 옵션

compilerOptions 속성들

• module
  • ts 소스코드가 컴파일되어 만들어진 js코드는 웹 브라우저와 Node.js에서 동작하는 방식이 달라서 동작 대상 플랫폼을 구분하여 그에 맞는 모듈 방식으로 컴파일 하려는 목적으로 설정한다.
  • 즉, 컴파일된 자바스크립트 모듈이 어떤 모듈 시스템을 사용할 지를 설정하는 옵션이다.
• moduleResolution
  • 타입스크립트가 모듈을 불러올 때 이 모듈이 정확히 무엇을 참조하는 지를 확인하는 프로세스를 다루는 옵션이라고 하는데,
    -Node.js 환경에서 동작한다면 node / 웹 브라우저라면 classic으로 설정하도록 하자.
• target
  • 트랜스파일할 대상 자바스크립트 버전을 설정한다.
  • 대부분 es5를 키 값으로 설정하는 것 같다.
• baseUrl / outDir
  • 트랜스파일된 es5 js파일을 저장하는 디렉토리를 설정한다.
  • baseUrl은 상대 경로로 모듈의 경로를 지정할 때 기준이 되는 위치를 지정하는 옵션이다.
  • outDir은 baseUrl을 기준으로 했을 때 하위 디렉토리의 이름이다.
• paths
  • import 문에서 from 부분을 해석할 때 찾아야하는 디렉토리를 설정한다.
  • 해당 속성을 사용하고자 한다면 baseUrl과 함께 쓰여야하는데,
    baseUrl을 기준으로 상대 경로로 계산되기 때문이다.
• esModuleInterop
  • true로 설정될 경우, ES6 모듈 사양을 준수하여 CommonJS 모듈을 가져올 수 있게 된다.
  • ES 모듈방식과 CommonJS 모듈 방식을 섞어서 사용할 때 설정한다.
    (모듈 방식이 엄청 많은데, JS에 표준 모듈 시스템이 너무 늦게 정의가 된 탓이라고 한다.)
• sourceMap
  • 키 값이 true라면 트렌스파일 디렉토리에 .js 파일 의외에 .js.map 파일이 만들어지며 이 맵 파일은 변환된 js코드가 ts코드의 어디에 해당하는지를 알려준다.
  • 주된 사용처는 디버깅할 때 소스맵 파일을 이용할 때이다.
• noImplicitAny
  • any 타입 금지 여부를 뜻한다.
  • 암시적 any 타입을 금지하기 위해 사용되는데,
    AnyScript를 피하려면 사실상 필수이다.