[Typscript] tsconfig.json

Typescript로 개발할 때 tsconfig.json에서 주로 사용되는 속성에 관하여 정리해보았습니다.

 

 

1. CompilerOptions

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "allowJs": true,
        "composite": true,
        "noImplicitAny": true,
        "removeComments": true,
        "baseUrl": "./"
        "paths": {
          "@/*": ["./src/*"]
        }
        "outFile": "./",
        "outDir": "./", 
        "rootDir": "./",
    }
}

target : Compile시에 Typescript 코드를 어떤 버전의 javascript 코드로 변경할지에 대한 설정

module : Javascript 코드 내에서 Module Import시 어떤 문법으로 변경할지에 대한 설정

(ex. commonjs : require, ex2015~ : import)

allowJs : ts에서 js 파일 import 가능여부

composite : 프로젝트 컴파일 활성화 

noImplicitAny : any타입 금지 여부

removeComments : 컴파일 시 주석제거

baseUrl : 모듈의 기본 위치 디렉토리 설정

path : baseUrl 기준 상대적인 조회 위치로 가져오기를 다시 매핑하는 설정

outFile : 모든 ts파일을 하나의 js파일 로 컴파일

outDir : 컴파일 시 생성 될 js파일의 생성 경로 설정

rootDir : 루트 경로 설정 (js output Directory에 영향이 있음)

 

2. include, exclude

"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],

include : 컴파일 시 포함 시킬 디렉토리 또는 파일

exclude : 컴파일 시 제외 시킬 디렉토리 또는 파일

* 0 이상의 모든 문자와 일치 (디렉토리 분리 기호 제외)
? 1개 문자와 일치 (디렉토리 분리 기호 제외)
**/ 모든 하위 디렉토리까지 포함

 

이외에도 무수히 많은 옵션들이 있지만 기본적인 옵션들만 설명하였습니다. https://www.typescriptlang.org/tsconfig에서 확인 하실 수 있습니다.

 

참고사이트

https://codingapple.com/unit/typescript-tsconfig-json/

https://www.typescriptlang.org/ko/docs/handbook/tsconfig-json.html

https://yamoo9.gitbook.io/typescript/cli-env/tsconfig