Skip to content

1. tsconfig.json 파일

1. tsconfig.json 파일

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


2. tsc 명령어

  • tsc 명령어는 타입스크립트를 자바스크립트로 변환할 때 사용하는 명령어이다.
  • 다음과 같이 입력하면 app.ts 파일이 app.js로 변환된다.


tsc app.ts


3. tsconfig.json 파일 인식 기준

  • tsc 명령어를 대상 파일을 지정하지 않고 실행하면, 현재 폴더에 있는 타입스크립트 설정 파일을 기준으로 변환 작업을 수행한다.
  • 만약 현재 폴더에 타입스크립트 설정 파일이 없다면 프로젝트 폴더 내에서 상위 폴더의 경로를 검색해 나간다.
  • tsconfig.json 파일의 경로를 명시적으로 지정하고 싶다면 다음 명령어를 사용한다.


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

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


4. tsconfig.json 파일 속성

1) files

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


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


2) include

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


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


Note

  • 와일드 카드 패턴은 다음과 같다.


1] *: 해당 디렉터리의 모든 파일 검색

2] ?: 해당 디렉터리 안에 있는 파일의 이름 중 한 글자라도 맞으면 해당

3] **: 하위 디렉터리를 재귀적으로 접근


3) exclude

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


{
  "exclude": ["node_modules"]
}


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


Note

  • 컴파일 대상 경로를 정의하는 속성의 우선 순위는 files > include = exclude이다.


4) @types 라이브러리와 typeRoots

  • 타입스크립트 설정 파일은 기본적으로 node_modules를 제외하지만 써드 파티 라이브러리의 타입을 정의해놓는 @types 폴더는 컴파일에 포함한다.


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


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


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


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


5) extends

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


{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

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


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


6) target

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


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


7) lib

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


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


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


8) allowJs

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

References