Typescript - tsconfig.json 파일 작성법 알아보기

타입스크립트 프로젝트를 나타내느 tsconfig.json파일에 대해 간략하게 알아보고자 합니다.

tsconfig.json의 파일명은 바뀔수 없습니다. 또한, 해당 파일이 존재한다는건 타입스크립트 프로젝트라는 뜻입니다.

 

1. include

{
 "include": ["src"] // src디렉토리의 모든 파일을 확인한다.
}

include는 타입스크립트의 컴파일이 대상이 될 디렉토리들을 배열형태로 넣어주면 됩니다.

위의 예시로는 src디렉토리의 모든 파일을 컴파일하게 됩니다.

 

2. complierOptions

타입스크립트 대부분의 옵션들을 담당하며 타입스크립트의 요소들을 어떻게 구동시킬 것인지 작성하게 됩니다.

 

 

2-1. outDir

outDir은 컴파일 후 빌드된 js파일들이 위치할 디렉토리를 설정합니다. 보통은 build로 작성합니다.

해당 디렉토리가 없다면 빌드후 디렉토리 생성 후 빌드된 파일들을 제공합니다.

{
  "compilerOptions": {
    "outDir": "build" // 보통 build 디렉토리에 생성한다.
  }
}

 

 

2-2. target

target은 컴파일을 진행 할 자바스크립트 버전을 뜻합니다.

ES3, ES5, ES6, ES2022 등 최신 문법까지 작성가능하며, 보통은 모든 브라우저에서 ES6를 지원하기때문에, ES6를 쓰는것을 추천합니다. 너무 낮은 버전인 ES3로 작성하게되면 컴파일 후 작성된 JS의 양이 많이질 수 있습니다. 하지만 서버용으로 개발하면서 낮은 버전의 모든것을 호환하려면 ES3를 생각해보는것도 괜찮습니다.

그렇다고 또 최신의 ES2022의 버전 또한 모든 브라우저가 제공되는게 아닐 수 있기때문에, 안정적인 버전으로 사용하는게 좋습니다.

{
  "compilerOptions": {
    "target": "ES6"
  }
}

 

 

2-3. lib

lib은 개발시 개발환경의 코드를 지정하는 옵션입니다. 웹개발을 통한 브라우저의 정보를 받고 싶다면, DOM을 입력하여 (document.~, window.~)의 정보들을 받아서 사용할 수도 있고, 또한 어떤 버전의 API의 정보들을 받아서 사용하는지 지정할 수 있습니다. 백엔드 작업이 아닌 프론트 & 브라우저 작업이라면 꼭 DOM을 입력하여 개발을 진행하고, 해당 옵션이 없다면 그저 JS 자체의 코드만 버전에 맞춰 제공됩니다.

가장 멋진점은 원하는 버전을 작성하면, Javascript이지만 Typescript에 맞춰 call signature를 제공해주기 때문에, 자주 사용하지 않는 메소드등을 사용하더라도 typescript의 도움을 받을 수 있습니다.

 

데이터 입력은 배열 형태로 입력하며, 문자열로 입력합니다.

{
  "compilerOptions": {
    "lib": ["es6", "DOM"] // ES6 문법과 브라우저 환경에서 사용된다고 지정됨
  }
}

 

 

2-4. strict

strict은 true, false boolean타입으로 옵션을 설정합니다.

엄격 모드로 프로그램의 정확성을 더 강력하게 보장하는 것을 제공하고 광범위하게 타입 검사를 하게 됩니다.

해당 옵션을 키게되면 조금만 잘 못된 코드를 작성하게되면 타입스크립트는 오류가 발생했다고 알려주게 됩니다.

올바른 타입스크립트 작성을 위해 항상 true상태로 개발을 진행해야겠습니다.

{
  "compilerOptions": {
    "strict": true
  }
}

 

 

2-5. allowJs

allowJs는 js파일들을 타입스크립트에서 허용해준다는 뜻으로, true옵션이 되면 js파일의 함수들을 타입스크립트에서 바로 사용이 가능해집니다.

이것을 사용하게되면 declare파일이 없어도 함수를 추론해서 타입들을 정의해주는 것을 볼 수 있습니다.

{
  "compilerOptions": {
    "allowJs": true
  }
}

 

2-6. esModuleInterop

boolean값으로 true, false로 값을 가집니다.

true처리를 하게 되면, 이전에 개발되어 제공되는 CommonJS사양과 ES사양의 라이브러리를 가져와서 import로 사용할 때 ES모듈 사양으로 준수하여 CommonJS의 모듈도 정상적으로 가져올 수 있도록 도와줍니다.

이전에 개발된 CommonJS에는 export default의 처리가 없기 때문에 typescript에서 뭘 가져오라는건지 알 수가 없게되는데, 해당 모듈이 CommonJS사양이든 ES사양이든 일관성 있게 참조할 수 있도록 도와줍니다.

{
  "compilerOptions": {
    "esModuleInterop": true,
    "module": "CommonJS"
  }
}

import crypto from "crypto"; // 원래는 오류가 발생한다.