tsconfig.json 파일 알아보기

tsc와 tsconfig.json

TypeScript를 사용하기 위해서 tsconfig.json 파일은 필수사항은 아니다. TypeScript가 전역으로 설치되어 있다면, tsc 명령어를 통해서 .ts로 작성된 파일을 .js로 컴파일 할 수 있다.

$ tsc example.ts

위 명령어를 실행하면 동일한 경로에 js로 컴파일링된 example.js 파일이 생성된다.

 

그렇다면 왜 tsconfig.json 파일을 설정할까?

vscode는 기본적으로 TypeScript에 대한 intellisense를 지원한다. (여담이지만, TypeScript도 마이크로소프트가 만들고, vscode도 마이크로소프트가 만듦. 마이크로소프트 다해먹어!! 짱짱맨!!) 우리가 개발을 하면서 어떤 코드가 잘못되었는지 빨간 밑줄을 쳐주거나 사용가능한 옵션들을 보여주는 것은 다 intellisense가 하는 일이다. 바로 이 TypeScript intellisense가 어떤 기준으로 코드 분석을 해야하는지 설정해주고 컴파일링은 어떤 방식을 해야하는지 설정해주는 파일이 바로 tsconfig.json 파일이다.

 

tsconfig.json 의 속성값 알아보기

"include"

include 속성에서는 배열 값 안에 어떤 파일 경로를 컴파일링 대상에 포함시킬 것인지를 명시해준다.

 { 
  "include": [
    "src"
  ]
}

"src"라고 표시하면 src 경로 안에 있는 모든 파일들을 컴파일링 대상에 포함시킨다는 뜻이다. 반대로, exclude는 어떤 대상을 컴파일링 대상에서 제외시킬 것인지를 명시적으로 적어준다. exclude를 지정하지 않으면 ["node_modules", "bower_components", "jspm_packages"] 와 outDir에 지정한 경로가 기본값이 된다. 여기서 포함되는 파일들은 TypeScript가 지원하는 확장자만을 포함한다. 예시로, .ts, .tsx, .d.ts 가 있으며 allowJs를 활성화시키면 .js, .jsx도 포함시킨다.

"compilerOptions"

compilerOptions 속성에는 컴파일링을 어떻게 할 것인가에 대한 항목을 설정해준다. 굉장히 많은 항목들이 있는데, 그 중 대표적인 것들만 알아보려고 한다.

- target

target에는 컴파일링 후의 최종 결과물이 어떤 버전의 JavaScript 문법으로 변환할 것인지를 정해준다.

{
  "compilerOptions": {
    "target": "es5"
    }
}

기본값은 "ES3"이다. 만약, ES3에 없는 JavaScript 기능을 코드에 작성하면 컴파일러는 에러를 출력한다.  여기서 중요한 점은 TypeScript와 Babel은 서로 독립적이기 때문에 tsconfig.json 파일에 명시해놓은 컴파일링 옵션이 Babel 의 컴파일링 옵션을 정의하지 않는다는 것이다. Babel 의 설정을 정의하고 싶다면 babel.config.json 파일을 통해서 설정해야 한다.

- strict

strict 를 true로 지정하면 TypeScript의 타입 검사 옵션 중에 strict 어쩌구 관련된 모든 것을 다 true로 만든다. 기본값은 false 이지만, true 로 설정해야 TypeScript를 사용하는 이점을 더 누릴 수 있다.

- baseUrl

baseUrl 에는 import 를 할 때 경로의 기본값을 설정해준다.

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

"src" 로 설정하면 절대경로로 import 를 할 수 있고, "./" 로 설정하면 상대경로로 import 를 할 수 있다.

- skipLibCheck

skipLibCheck 를 true 로 지정하면 .d.ts 파일의 타입 검사를 생략시킬 수 있다. 외부 라이브러리의 .d.ts 파일에 타입 정의가 잘못되어 있을 경우에 .d.ts 파일의 검사를 생략시키고, 내부 프로젝트에는 .d.ts 파일을 생성하지 않으면 외부 라이브러리의 타입 체크를 건너뛸 수 있다. 일반적으로 .d.ts 파일은 외부용으로 사용되므로 내부 프로젝트에서는 타입 정의를 .ts 파일에서 하고 import 해서 사용한다.

- lib

lib 에는 현재 프로젝트에서 사용하는 특정 기능에 대한 문법 타입을 추가해준다.

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

TypeScript는 기본으로 DOM 관련 API 를 추가해주지 않기 때문에 만약 웹 브라우저에서 실행되어야 하는 코드라면 lib 에 "DOM"이라고 명시해주어야 document 같은 DOM 관련 코드를 실행해도 에러가 나지 않는다.

- esModuleInterop

import/export 구문은 ES6 에서 새롭게 나온 기능이기 때문에 module.exports = XXX 를 통해 내보내진 객체는 import 와 호환이 안 된다. 이러한 문제의 불편함을 해소하기 위해 exModuleInterop 을 true 로 설정해주면 컴파일링에서 자동으로 문제를 해소해준다.

- isolatedModules

isolatedModules 를 true 로 설정하면 프로젝트 내의 모든 각각의 소스코드가 담긴 파일을 모듈로 만들기를 강제한다. 소스코드 파일에서 import 또는 export 를 사용하면 그 파일은 모듈이 된다. 소스코드 파일 안에 import 나 export 가 없다면 그 파일은 전역 공간으로 정의되는데 이때 isolatedModules 가 true 로 되어 있다면, 에러를 출력한다.

- noEmit

noEmit 을 true 로 설정하면 컴파일링 된 js 파일이 나오지 않는다. 물론, 최종 빌드 과정에서는 당연히 컴파일링 된 js 파일이 나온다. (브라우저는 ts 파일을 해석할 수 없으므로!!) 개발 과정에서 컴파일링 된 js 파일이 나오지 않게 하고 단순 타입 체크 용으로 사용할 것이라면 noEmit 을 true 로 설정하면 된다.

 

더 디테일 한 옵션들을 알고싶다면 TypeScript 공식문서에서 확인할 수 있다.

TSConfig Reference - Docs on every TSConfig option