tsconfig.json에 대한 이해

TypeScript

개요

- CRA 없이 webpack에서 typescript 설정을 위한 개발 환경 설정

- typescript 핸드북 참고

 

tsconfig.json 생성하기

tsc 명령의 tsc --init 명령어를 사용한다.

타입스크립트 프로젝트에서는 구성 파일을 생성하기 위해 해당 명령어를 사용하는 것을 권장한다.

What is a tsconfig.json

디렉토리에 tsconfig.json 파일이 있다면 해당 디렉토리가 TypeScript 프로젝트의 루트가 된다.

tsconfig.json 파일은 프로젝트를 컴파일하는데 필요한 루트 파일과 컴파일러 옵션을 지정한다.

 

자바스크립트 프로젝트는 jsconfig.json 파일을 대신 사용할 수 있다.

이 파일은 tsconfig.json 파일과 거의 동일하게 동작하지만, 몇몇 자바스크립트 관련 컴파일러 플래그가 기본으로 활성화되어 있다.

 

• 입력 파일 없이 tsc를 호출하면 컴파일러는 현재 디렉토리에서부터 시작하여 상위 디렉토리 체인으로 tsconfig.json 파일을 검색
• 입력 파일 없이 tsc와 tsconfig.json 파일이 포함된 디렉토리 경로 또는 설정이 포함된 유효한 경로의 .json 파일 경로를 지정하는 --project (또는 -p) 커맨드 라인 옵션을 사용 가능

커맨드 라인에 입력 파일을 지정하면 tsconfig.json 파일이 무시된다.

 

예제

tsconfig.json 예제 파일

• files 속성 사용하기
  
• include 와 exclude 속성 사용하기

{
"compilerOptions": // 포함된 각 파일이 타입스크립트에 따라 컴파일 되거나 타입을 확인하는 방법
	{ 
      "target" : "es5", // es5로 설정하면 es5 버전 자바스크립트로 컴파일 해준다. 
      //최신버전을 원할 경우 es2016, esnext 도 가능.
      "module": "commonjs", // 자바스크립트 간 import 문법을 구현할 때, 어떤 문법을 사용 할 것인지 정한다. 
      //( commonsJs 는 require 문법, es2015,esnext는 import 문법을 사용한다 어느정도 IE 호환성을 원하면 es5, commonJS 사용 추천)
      "noImplicitAny": true, // any 타입이 의도치않게 발생한 경우 에러를 띄어준다.
      "removeComments": true, // 컴파일 시 주석이 제거된다.
      "preserveConstEnums": true, // const enum 형 선언을 지우지 않을건지 여부 체크.
      "sourceMap": true // 디버깅과 개발할 때 필요, tsc를 실행하면 디렉토리에 .map 파일이 생성된다. 
      // 개발자도구 Sources 탭에서 .ts파일을 확인할 수 있게한다.
    },
    "files": [ // 타입스크립트가 실행될 파일과 실행되지 않은 파일
      "core.ts",
      "sys.ts",
      "types.ts",
      "scanner.ts",
      "parser.ts",
      "utilities.ts",
      "binder.ts",
      "checker.ts",
      "emitter.ts",
      "program.ts",
      "commandLineParser.ts",
      "tsc.ts",
      "diagnosticInformationMap.generated.ts"
    ]
  }

{
    "compilerOptions": {
      "module": "system",
      "noImplicitAny": true,
      "removeComments": true,
      "preserveConstEnums": true,
      "outFile": "../../build/local/tsc.js", // 단일 파일로 출력시 파일 명
      "sourceMap": true
    },
    "include": ["src/**/*"], // 파일을 포함하는 가장 흔한 방법 tsconfig.json의 최상위 include 속성을 사용. 
    // src/**/* 디렉토리 안의 모든 타입스크립트 파일을 재귀적으로 포함
    "exclude": ["node_modules", "**/*.spec.ts"]
  }

 

include

포함된 파일을 제어하기 위한 문법

• *: 0 개이상의 문자와 일치시킵니다. (디렉터리 구분자 제외)
• ?: 하나의 문자와 일치시킵니다. (디렉터리 구분자 제외)
• **/ : 모든 레벨에 중첩된 모든 디렉터리와 일치시킵니다. 

대부분 프로젝트에서는 ["src"]와 같은 간단한 include 컴파일러 옵션만으로 충분하다.

 

exclude

프로젝트의 include 파일 목록에 타입스크릅트로 컴파일 할 수 없는 파일이 포함되는 경우를 막기 위해 include의 시작 목록에서 파일을 제거하는 작업 수행

타입스크립트는 비록 가져온 파일이 exclude 목록에 명시적으로 나열되어 있더라도 포함된 파일에 따라 가져온 모든 파일에서 실행된다.

 

레퍼런스

TypeScript: Documentation - What is a tsconfig.json (typescriptlang.org)

Documentation - What is a tsconfig.json

Typescript 컴파일시 세부설정 (tsconfig.json) - 코딩애플 온라인 강좌 (codingapple.com)

Typescript 컴파일시 세부설정 (tsconfig.json) - 코딩애플 온라인 강좌

[TypeScript] tsconfig.json 의 기본 옵션 (basic options) (velog.io)

[TypeScript] tsconfig.json 의 기본 옵션 (basic options)