타입스크립트 tsconfig 간단히 살펴보기

개요

CRA, next.js 등을 이용하면 보통 타입스크립트를 직접 세팅해볼 일이 없다. 그러나, 타입스크립트를 직접 세팅할 줄 알게 되면 많은 부분 커스터마이징도 가능할 뿐더러 타입스크립트 자체에 대한 이해도 증가한다.

tsconfig.json

프로젝트 루트에 tsconfig.json 을 생성하는 것은 프로젝트 내부에서 타입스크립트를 사용할 것이라 선언하는 것이다. VSCODE 는 이를 기준으로 자동완성 등을 제공한다.

tsconfig.json 내부에 존재하는 옵션들

include

어떤 경로의 파일들을 ts 에서 js 로 컴파일할지 지정하는데 사용된다. 단순히 파일 이름 자체를 지정하는 것이 아니라, 파일 이름 패턴을 주로 이용한다. 파일 이름 지정 패턴에는 glob 패턴이 주로 이용된다.

{
  "include": ["src/**/*"]
}

• 위와 같이 입력하면, src 디렉토리 내부에 있는 모든 ts 파일을 js 파일로 컴파일한다.
  • src/**/* 패턴은 src 깊이에 상관 없이 디렉토리 내부에 있는 모든 파일을 포함시킨다.

exclude

include 를 해석할 때 제외될 경로를 지정한다. 참고로 제외될 경로를 지정하는 것이 아니라, include 로 지정된 것 중에 제외될 것을 지정하는 것이다.

compilerOptions.outDir

{
  "include": [
    "src/**/*"
  ],
  "compilerOptions": {
    "outDir": "build"
  }
}

컴파일된 자바스크립트 파일이 어디에 저장될 지 지정하는 옵션이다. 만일 이 부분을 위와 같이 build 라고 지정한다면, 이전에 설정해두었던 include 와 맞물려 src 에 있는 .ts 파일을 .js 로 번역하고 번역된 파일을 build 디렉토리에 저장할 것이다.

compilerOptions.target

ts 파일을 해석할 때, 어떤 버전의 자바스크립트로 변경할지에 대한 옵션이다.

{
  "include": [
    "src/**/*"
  ],
  "compilerOptions": {
    "outDir": "build",
    "target": "ES3"
  }
}

위와 같이 설정하면 타입스크립트 파일을 ES3 버전의 자바스크립트로 해석한다. ES3 에는 const 가 존재하지 않아서 var 로 바뀌고, arrow function 도 존재하지 않아서 일반 function 으로 바뀐다.

• 너무 낮은 버전을 쓸수록 지원하지 않는 문법이 많아서 코드가 매우 길어질 수 있다는 것을 염두에 두자.
• target 공식문서 설명 에서는 node js 와 브라우저 호환성이 높으면서도 많은 문법을 지원하는 ES6 정도가 적당한 버전으로 취급받고는 있지만, 상황에 따라 달라질 수 있다.
• target 을 바꾸는 것은 lib 의 기본 버전을 바꾸는 역할도 한다.
  • target 과 lib 을 각각 다른 버전으로 직접 지정하여 사용해도 되긴 하지만, target 만 설정해두는 게 더 편하다.

compilerOptions.lib

자바스크립트는 버전이 업데이트 되면서 Object 혹은 prototype function 과 같은 것들을 새롭게 만들어냈다. lib 은 그런 라이브러리를 어떤 버전을 기준으로 불러올지에 대한 설정을 담당한다. 이 버전은 우리가 개발하는 환경에 맞게 세팅하면 된다.

우리가 어떤 API 를 사용하고 어떤 환경에서 코드를 실행하는지 말해주면 타입 지원을 받을 수 있는 것이다.

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

lib 을 위와 같이 설정하면, ES6 에 있는 모든 유틸 라이브러리를 불러오게 되고, DOM 을 컨트롤하는데 사용되는 API 도 불러오게 된다. document., window., localStorage 등 으로 시작하는 메서드들을 사용하는데 필요한 지원을 받을 수 있다.

/node_modules/typescript/lib 디렉토리 내부에 여러 타입 정의 파일들(d.ts)이 있다. 타입 정의 파일들 덕에 우리는 타입스크립트로 코드를 작성할 때 코드 자동 완성의 도움을 많이 받을 수 있다.

"lib": ["DOM"] 을 지우면, 더이상 DOM API 에 대한 지원을 받을 수 없다.

권장되는 TSConfig 사용하기

특정 런타임에 권장되는 TSConfig 를 이 링크 에서 볼 수 있다.

레퍼런스

https://www.typescriptlang.org/tsconfig

위의 공식문서에서 원하는 섹션을 보면 된다. 혹은 tsconfig.js 의 프로퍼티 위에 마우스를 올려놓으면 문서로 향하는 링크가 뜬다.