[TypeScript] - 기본다지기2(Complier Option)

 

이전 블로그에서 마지막에 TypeScrip의 컴파일러 옵션을 설치했다. (tsc --init)

설치가 완료되면 tsconfig.json이라는 파일이 하나 생성된다. 

 

너무 많은 설명들

 

엄청 많은 주석들이 반겨준다. 여기서 필요한 설정만 관리할 수 있게끔 싹다 지우고 하나하나씩 설명해 보도록 하겠다.

 

1. ComplierOptions

컴파일에 관련된 모든 설정들이 들어있다.

{
  "compilerOptions": {
    "target": "ESNext",  // 컴파일 후 생성되는 js의 파일 버전(ESNext는 js의 최신버전)
    "module": "ESNext",  // 모듈 시스템을 바꿀 수 있다.
    "outDir": "dist",  // 생성될 js 파일들이 위치할 폴더
    "strict": false,    // 타입 조절을 엄격하게 할것인지 아닌지
    "moduleDetection": "force"  // 모듈 시스템을 개별로 나눈다.
  },
  "ts-node": {
    "esm": true
  },
  "include": ["src"]  // src 하위의 모든 ts 파일을 js 파일로 일괄 처리한다.

}

1. target : 컴파일 후 생성되는 JS 의 파일 버전

TS 파일에서 위와같이 썻다고 가정했을 때 targer의 값이 ES5인 경우와 ESNext(최신문법)인 경우 다르게 컴파일되는 상황이 발생한다.

(좌) ES5 , (우) ESNext

 

2. module: 모듈 시스템을 바꿀 수 있다. 

예를 들어 리액트로 코드를 짤 경우 모든 컴포넌트들은 모듈 시스템으로 이루어져 있다. 이러한 모듈 들을 어떤 방식으로 처리할 지 결정해주는 설정이다. 어떤 사이트에서는 module 시스템을 CommonJS로 지원할 수 있고 어떤 사이트는 최신 문법을 지원 해줄 수 있으니 상황에 따라 다르게 설정할 수 있어야 한다.

(좌) CommonJS, (우) ESNext

 

3. outDir: 생성될 JS 파일들이 위치할 폴더 지정

TypeScript에서 컴파일 후 생성되는 JavaScript파일들이 위치 할 폴더를 지정해 주는 설정이다.

dist 폴더에 생성된 모습

 

4. strict: 타입 조절을 엄격하게 검사할 것인지 확인하는 설정

 

5. moduleDetection: TypeScript의 모듈들을 나누는 설정

TypeScript는 글로벌 모듈로 인식하고 있기 때문에 서로 다른 두개의 파일에서 같은 변수를 사용할 경우 오류가 생긴다. 

따라서 각각의 파일들을 모듈화 해야 하는데, 이때 매번 쓰기 번거로워서 moduleDetection을 force로 해준다. 

그러면 컴파일 할 때 알아서 각각의 파일들을 개별 모듈화 한다.

 

"type": "module",

각각의 파일들에 export()가 생기기 때문에 package.json에 module 타입을 설정해 줘야 한다.

 

 

6. include: 여러 파일을 한번에 컴파일 할 수 있게 하는 설정

한번에 하나의 파일만 컴파일 하기에는 너무 비효율적이다. 폴더 경로를 설정해 줘서 그 하위 파일들을 일괄 처리하자!!