tsconfig.json

tsconfig.json 은 타입 스크립트를 사용한다면 필수적으로 알고, 다룰줄 알아야 하는 파일이다.

타입스크립트라는 언어는 자바스크립트에 타입을 부여한 확장언어이다.

즉, 컴파일시에는 다시 타입스크립트에서 자바스크립트로 변환이 일어난다는 소리인데, 이때 어떻게 변환할 것인지 설정을 저장하는 파일이 바로 tsconfig.json 이다.

변환시, tsc sample.ts 의 명령어를 사용한다.

이 tsconfig.json 를 어떻게 작성해야하는지 주요 항목들을 살펴보자

files, include, exclude

어떤 파일을 타입스크립트로 변환할지 설정하는 항목이다. 물론 이 항목을 사용하지 않고 위에 언급한 명령어를 사용할수도 있지만, 파일 하나하나에 저 멍령어를 치는것은 매우 비효율적이다...

{
    "files": ["app.ts"]
}

그런데 파일 하나하나 이렇게 배열에 넣는것조차 비효율적으로 느껴진다. 따라서 주로 사용하게 되는 항목이 바로 include다.

include 는 files 처럼 개별 파일을 지정하지 않고 변환할 폴더 경로를 지정할 수 있다.

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

"*": 해당 디렉토리 안의 모든 파일

"**" : 해당 디렉토리의 하위 디렉토리를 재귀적으로 접근

추가적으로 include 와 반대로, 변환하지 않을 파일을 지정하는 exclude 항목도 있다.

compilerOptions

compilerOptions는 컴파일할 파일들을 어떻게 해야할지 정하는 항목이다. 하위 항목이 많아 실제 파일을 가져와서 보자

{
    "compilerOptions" : {
        "target": "es6",                          /* ECMAScript 목표 버전 설정. 최종적으로 컴파일하는 결과의 문법을 결정한다. */
        "module": "esnext",                       /* 생성될 모듈 코드 설정: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
        "baseUrl": ".",                            /* 내부 모듈들을 작성한 경로의 절대경로로 참조할수 있게 한다.*/
        "paths": {                                /* baseUrl을 기준으로 경로를 매핑한다. ../../* 경로 대신 @/component/* 처럼 사용 가*/
            "@/*": ["./src/app/*"]
        },
        "lib": ["dom", "dom.iterable", "esnext"], /* 컴파일 과정에 사용될 라이브러리 파일 설정 */
        "allowJs": true,                          /* JavaScript 파일 컴파일 허용 */
        "checkJs": true,                       /* .js 파일 오류 리포트 설정 */
        "jsx": "react",                           /* 생성될 JSX 코드 설정: 'preserve', 'react-native', or 'react'. */
        "declaration": true,                   /* '.d.ts' 파일 생성 설정 */
        "declarationMap": true,                /* 해당하는 각 '.d.ts'파일에 대한 소스 맵 생성 */
        "sourceMap": true,                     /* 소스맵 '.map' 파일 생성 설정 */
        "outFile": "./",                       /* 복수 파일을 묶어 하나의 파일로 출력 설정 */
        "outDir": "./dist",                    /* 출력될 디렉토리 설정 */
        "rootDir": "./",                       /* 입력 파일들의 루트 디렉토리 설정. --outDir 옵션을 사용해 출력 디렉토리 설정이 가능 */
        "composite": true,                     /* 프로젝트 컴파일 활성화 */
        "tsBuildInfoFile": "./",               /* 증분 컴파일 정보를 저장할 파일 지정 */
        "removeComments": true,                /* 출력 시, 주석 제거 설정 */
        "noEmit": true,                           /* 출력 방출(emit) 유무 설정 */
        "importHelpers": true,                 /* 'tslib'로부터 헬퍼를 호출할 지 설정 */
        "downlevelIteration": true,            /* 'ES5' 혹은 'ES3' 타겟 설정 시 Iterables 'for-of', 'spread', 'destructuring' 완벽 지원 설정 */
        "isolatedModules": true,                  /* 각 파일을 별도 모듈로 변환 ('ts.transpileModule'과 유사) */
    }
}