TypeScript에 대한 간단한 정리 - 13. tsconfig.json의 구성 옵션

타입스크립트 프로젝트를 시작하면 tsconfig.json이라는 파일을 만들어줘야만 하고 이는 타입스크립트 컴파일러(tsc) 가 프로젝트의 설정을 어떻게 처리할지에 대해서 사용자가 알려줄 수 가 있게 된다.

이 설정을 통해서 타입스크립트 컴파일러가 어떻게 TypeScript 파일을 처리하고 변환할지에 대해서 결정할 수 있다.

 

tsconfig.json 파일은 크게 3가지 옵션으로 구분 하는데 compilerOptions, include, exclude로 나눌 수 있다.

 

1. compilerOptions (컴파일러 옵션)

compilerOptions는 타입스크립트 컴파일러(tsc)가 코드를 어떻게 변환하고 처리할지를 설정하는 옵션으로 프로젝트의 주요한 컴파일 동작에 대해서 정의하게 된다.

 

이 컴파일러 옵션 내부에는 세부 옵션들이 존재하는데 

• target - 컴파일 될 ES(JS) 버전 명시(컴파일 후 생성될 JavaScript의 버전을 설정하는 것) => 기본값 : "ES3"

사용할 수 있는 값의 예로는 "ES5", "ES6"(= "ES2015" ), "ESNext" 등이 있다.

기본값으로 설정된 ES3같은 경우는 1999년도에 나온 JavaScript 버전이기에 지원할 수 있는 기능이 별로 없어 아마 기본값으로 설정해서 컴파일 하는 일은 없을 것으로 보인다. 

보통 지금은 ES6(ECMAScript 2015)를 사용하는 듯 보인다.

 

• module - 사용할 모듈 시스템 지정 => 기본값 : "CommonJS"

사용할 수 있는 값의 예로는 "CommonJS" (Node.js), "ESNext" (ES 모듈), "AMD" (브라우저 환경용) 등이 있다.

자바스크립트를 사용하는 환경은 Web Browsor와 Node.js로 나뉘는데 이 Node.js환경에서 사용하는 모듈 시스템은 CommonJS와 ESM이라고 불리는 ES 모듈 시스템을 사용하는데 이게 ESNext와 같다.

 

• moduleResolution - 모듈 해설 방식 지정 => 기본값 : "Node"

사용할 수 있는 값의 예로는 "Node"와 "Classic"이 있다.

여기서 Node 방식은 모듈을 가져올 때 index라는 라는 이름을 가지고 있으면 생략을 해도 되었던거 기억하는가, 

이렇게 디렉터리 내부에 index.ts라는 파일이 존재하고 내부에 

이렇게 내용이 작성되어 있다고 했을때 이 파일을 가져다 쓰는 main.ts에서는 

이렇게 파일명을 작성해줄 필요 없이

이렇게 디렉터리 명만 작성해도 index파일을 가져왔었었다.

이게 바로 해당 옵션( moduleResolution )에 "Node"라는 옵션을 사용했기 때문에 가능했던 것이다.

 

Classic의 경우는 조금 다르다는 것만 일단 알고 있자.

 

• esModuleInterop - ESM 모듈 방식의 호환성 활성화 여부(CommonJS 모듈을 ES 모듈처럼 사용할 수 있게 함)  => 기본값 : false

외부에서 라이브러리나 패키지를 받아 들이다 보면 CommonJS와 ESM방식이 혼재되어 있는 경우가 다수 존재한다.

그럴때 마다 구분해가면서 사용하는 것 보다는 해당 옵션을 true로 설정해줌으로 두 방법이 호환이 될 수 있도록 설정해주는 것이 좋다.

 

• isolatedModules - 모든 파일을 모듈로 컴파일, import 혹은 export 키워드 필수 => 기본값 : false

이 옵션의 경우는 JavaScript나 TypeScript에서는 별도의 import나 export를 사용하지 않으면 해당 파일은 모듈로써 취급해주지 않는다.

그런데 isolatedModules의 옵션을 true로 설정하면 모든 파일은 모듈로 되어 있어야 한다고 설정을 한것이기 때문에 import나 export 키워드가 없으면 컴파일 에러를 발생시키는 것이다. (나는 여기서 에러를 벹지 않고 있음, 무슨 문제인지 확인해봐야 할듯) 

 

• baseUrl - 모듈 해석에 사용할 기준 경로 설정 => 기본값 : "./"

모듈을 찾는 기준에 대한 설정인데 만약 src 폴더 내부에 components라는 폴더 내부에 모듈이 존재한다면 원래라면 

import { MyComponent } from "../src/components/MyComponent";

와 같이 모든 경로를 작성해줬어야 하는데 

{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

이렇게 경로를 ./src를 기준으로 모듈을 찾기 시작해라 라고 옵션을 넣어주면 모듈을 찾을때 

import { MyComponent } from "components/MyComponent";

이렇게 만으로도 찾아 올 수 있다.

 

보통은 tsconfig.json파일이 root 경로에 존재하는게 대부분이나 특정 상황에 따라서 tsconfig.json파일이 특정 폴더 내부에 존재하는 경우도 있는데 이럴때는 만약 src폴더를 컴파일 해야한다면 tsconfig.json파일을 기준으로 baseUrl에 있는 경로를 작성해줘야 한다.

{
  "compilerOptions": {
    "baseUrl": "../src"
  }
}

 

 

• typeRoots - 컴파일러가 참조할 타입 선언(.d.ts)의 경로를 지정해준다 => 기본값 : ["./node_modules/@types"]

이 옵션은 이전에 봤던 대로 컴파일을 할때 type에 대한 선언이 어떤 경로에 존재하는지를 지정하는 옵션이다.

기본 설정에서되어 있는 경로에는 우리가 npm으로 받은 패키지의 정의들이 담기는 것이고, 추가적으로 우리가 작성하는 dts파일의 위치를 작성해서 찾아가도록 해줄 수 도 있다.

배열의 형태기에 ,를 추가한 후에 path를 추가해주면 된다.

와 같이 말이다.

 

• lib - 컴파일러에서 사용할 라이브러리를 지정한다 => 기본값 : []

해당 옵션은 TypeScript를 JavaScript로 컴파일할 때 필요한 내부 라이브러리를 설정할 수 있다.

사용할 수 있는 값의 종류는 "ESNext", "DOM"이 있다.

해당 옵션은 배열의 형태로 지정하기 때문에 ESNext와 DOM을 둘다 설정해줄 수도 있다.

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM"]
  }
}

이렇게 설정되었다면 브라우저 환경의 최신 ECMAScript 기능과 DOM API를 모두 사용할 수 있게 된다.

 

• strict - 더 엄격한 타입 검사를 활성화 한다. => 기본값 : false

타입스크립트를 사용하는 중요한 포인트가 해당 기능을 위해서기 때문에 되도록이면 true로 설정해서 사용하는 것을 권장한다.

 

 

2. include (컴파일 할 파일 경로를 지정하는 옵션)

어떤 곳에 있는 TypeScript 파일을 컴파일 해서 JavaScript로 변환할지에 대한 경로를 지정하는 부분으로 배열의 형식으로 다수의 경로를 제공해줄 수 있다.

"include": ["src/**/*.ts"]

이렇게 작성해주면  src폴더 하위에 있는 모든 폴더 내부에 있는 .ts파일에 대해서 컴파일 할때 JavaScript로 변환해라 라고 설정해주는 내용으로 작성되어 있는 것을 볼 수 있다.

만약에 추가적으로 src폴더말고 다른 폴더 또한 ts파일을 자바스크립트로 컴파일이 필요하다면 

"include": [
    "src/**/*.ts",
    "dev/**/*.ts"    
]

와 같이 배열의 형태로 추가해주면 된다.

 

3. exclude(컴파일에서 제외할 파일 경로를 지정하는 옵션)

JavaScript로 컴파일 할때 필요한 경우에는 파일 혹은 폴더의 경로를 작성하여 컴파일 설정에서 제외할 수 있다.

기본적으로 node_modules는 자동으로 제외된다(exclude가 작성되지 않은 경우, 사용자가 exclude를 작성했다면 명시해줘야만 node_modules를 제외시킨다).

 

 

 

 

해당 옵션들만 존재하는게 아니라 추가적으로 옵션들을 많이 제공하기 때문에 필요하다면 옵션들에 대해서 확인해보도록 하는 게 좋다.

이 정도는 그냥 기본적인 옵션에 대해서 이해하고 넘어가기 위함이라고 생각해보자.