# 타입스크립트 설정 파일 (tsconfig.json)

타입스크립트 설정 파일은 타입스크립트를 자바스크립트로 변환할 때의 설정을 정의해놓는 파일입니다. 프로젝트에서 tsc라는 명령어를 치면 타입스크립트 설정 파일에 정의된 내용을 기준으로 변환 작업(컴파일)을 진행합니다.

# tsc 명령어

tsc 명령어는 타입스크립트를 자바스크립트로 변환할 때 사용하는 명령어입니다. 아래와 같이 입력하면 app.ts 파일이 app.js로 변환됩니다.

tsc app.ts

# 타입스크립트 설정 파일 인식 기준

tsc 명령어를 대상 파일을 지정하지 않고 실행하면 현재 폴더에 있는 타입스크립트 설정 파일을 기준으로 변환 작업을 수행합니다. 만약 현재 폴더에 타입스크립트 설정 파일이 없다면 프로젝트 폴더 내에서 상위 폴더의 경로를 검색해 나갑니다.

tsconfig.json 파일의 경로를 명시적으로 지정하고 싶다면 아래 명령어를 사용하세요.

# 형식 예시
tsc --project 상대 경로

# 실제 명령어 예시
tsc --project ./src
tsc -p ./src

# 타입스크립트 설정 파일 속성

# files

타입스크립트 변환 명령어를 입력할 때마다 대상 파일의 경로를 지정하지 않고 설정 파일에 미리 정의해놓을 수 있습니다.

{
  "files": ["app.ts", "./utils/math.ts"]
}

# include

files와 같이 파일을 개별로 지정하지 않고 include 옵션으로 변환할 폴더를 지정할 수 있습니다.

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

# exclude

include와 반대되는 속성으로 변환하지 않을 폴더 경로를 지정합니다.

{
  "exclude": ["node_modules"]
}

만약 설정하지 않으면 기본적으로 node_modules, bower_components 같은 폴더를 제외합니다.

# @types 라이브러리와 typeRoots

타입스크립트 설정 파일은 기본적으로 node_modules를 제외하지만 써드 파티 라이브러리의 타입을 정의해놓는 @types 폴더는 컴파일에 포함합니다. 예를 들면 아래와 같습니다.

└─ node_modules
   ├─ @types => 컴파일에 포함
   ├─ lodash => 컴파일에서 제외

그런데 여기서 만약 @types의 기본 경로를 변경하고 싶다면 아래와 같이 지정할 수 있습니다.

{
  "compilerOptions": {
    "typeRoots" : ["./my-types"]
  }
}

이렇게 되면 타이핑 라이브러리(써드 파티 라이브러리의 타입 정의 라이브러리)의 대상 경로가 node_modules/@types에서 node_modules/my-types로 변경됩니다.

# extends

특정 타입스크립트 설정 파일에서 다른 타입스크립트 설정의 내용을 가져와 추가할 수 있는 속성입니다.

// config/base.json
{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

// tsconfig.json
{
  "extends": "./config/base"
}

확장한 파일의 내용을 가져다가 덮어쓰거나 새로 정의할 수도 있습니다.

# target

타입스크립트 파일을 컴파일 했을 때 빌드 디렉토리에 생성되는 자바스크립트의 버전을 의미합니다. 기본 값인 es3부터 es5, es6 등 가장 최신 버전인 esnext까지 있습니다.

// tsconfig.json
{
  "target": "esnext"
}

# lib

타입스크립트 파일을 자바스크립트로 컴파일 할 때 포함될 라이브러리의 목록입니다. 이 속성을 활용하는 가장 대표적인 사례는 async 코드를 컴파일 할 때 Promise 객체가 필요하므로 아래와 같은 설정을 해줘야 합니다.

// tsconfig.json
{
  "lib": ["es2015", "dom", "dom.iterable"]
}

여기서 es2015는 프로미스 객체를 타입스크립트에서 인식할 수 있게 필요한 속성이고, dom 관련 속성은 DOM API를 사용하는 경우 필요합니다.

# allowJs

타입스크립트 컴파일 작업을 진행할 때 자바스크립트 파일도 포함될 수 있는지를 설정해주는 속성입니다. 주로 이미 기존에 존재하는 자바스크립트 프로젝트에 타입스크립트를 점진적으로 적용할 때 사용하면 좋은 속성입니다.