[TypeScript] tsconfig.json

tsconfig.json 파일은 TypeScript 컴파일러의 옵션을 설정하는 파일이며 다음의 방법으로 파일을 생성할 수 있습니다.

tsc --init

위 명령으로 인해 생성된 파일은 tsconfig.json이며 파일을 열어보면 대략 아래 내용들이 들어가 있음을 알 수 있습니다.

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    // "incremental": true,                         /* Enable incremental compilation */
    "target": "es5",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    // "lib": [],                                   /* Specify library files to be included in the compilation. */
    // "allowJs": true,                             /* Allow javascript files to be compiled. */
    // "checkJs": true,                             /* Report errors in .js files. */
    // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
    // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true,                           /* Generates corresponding '.map' file. */
    // "outFile": "./",                             /* Concatenate and emit output to single file. */
    // "outDir": "./",                              /* Redirect output structure to the directory. */
    // "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                           /* Enable project compilation */
    // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
    // "removeComments": true,                      /* Do not emit comments to output. */
    // "noEmit": true,                              /* Do not emit outputs. */
    // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true,                                 /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,                    /* Enable strict null checks. */
    // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
    // "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                      /* Report errors on unused locals. */
    // "noUnusedParameters": true,                  /* Report errors on unused parameters. */
    // "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
    // "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
    // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */

    /* Module Resolution Options */
    // "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
    // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                             /* List of folders to include type definitions from. */
    // "types": [],                                 /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
    // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */

    /* Source Map Options */
    // "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */

    /* Advanced Options */
    "skipLibCheck": true,                           /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true        /* Disallow inconsistently-cased references to the same file. */
  }
}

tsconfig 파일이 생성된뒤 아래 명령어를 입력하게 되면 현재 폴더에 모든 ts파일을 감시해 변경이 발생하면 각각의 파일에 해당하는 js파일을 만들어주게 됩니다.

tsc -w

compilerOptions의 각 옵션들 중 Basic Option들에 대해서는 아래 표를 참고해 주세요.

target	컴파일시 대상이될 ECMAScript버전
module	모듈의 구현방법
allowJS	컴파일 대상에 js파일 포함 여부
checkJS	js파일에 오류가 있으면 알려줄것인지 여부
jsx	리액트파일 사용 여부
sourceMap	디버깅관련 map파일 생성 여부
outFile	모든 ts파일의 컴파일결과를 outFile에 지정된 하나의 파일로 생성
composite	컴퍼일정보를 기억하고 다음 컴파일시 반영할것인지여부
tsBuildInfoFile	inremental이 true로 사용될때 관련 정보를 저장할 파일
removeComments	컴파일시 결과물에 주석 삭제 여부
noEmit	오류확인만 진행하고 파일은 생성하지 않음
isolatedModules	각각의 파일을 모듈로 생성할지 여부

tsconfig.json옵션들 중 outDir은 js파일이 만들어질 때의 경로를 의미합니다. 만약 이 옵션의 주석을 풀고 다음과 같이 설정하게 되면

"outDir": "./javascript",                              /* Redirect output structure to the directory. */

설정한 위치에 따라 현재 폴더를 기준으로 javascript폴더에 js파일을 생성하게 됩니다.

 

outDir밑에는 rootDir옵션도 있는데 rootDir은 ts파일이 존재하는 폴더를 지정하는 것입니다.

"rootDir": "./work",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */

따라서 위 설정은 ts가 최상위 디렉토리로부터 work폴더 안에만 있어야 함을 지정하고 있습니다. 만약 다른 위치에 ts파일이 감지되면 TypeScript는 오류를 발생시키게 됩니다.

 

tsconfig.json을 사용하면 특정 파일이나 디렉토리를 컴파일 대상이 포함시킬 것인지 제외할 것인지의 여부도 설정할 수 있습니다. 이러한 설정은 기본적으로 tsconfig.json안에 있는 compilerOptions옵션 이외에 다음과 같이 별도의 옵션을 추가하는 방법으로 이루어 집니다.

"exclude": ["./work/dev", "./work/test.ts"]

예제는 exclude라는 옵션을 통해서 컴파일 대상에 제외되어야 할 디렉터리와 파일을 배열로 지정하고 있습니다. 반대로 include옵션을 설정할 수도 있는데 include는 컴파일에 포함되어야 할 폴더나 파일만을 지정하게 됩니다.

 

또 하나 sourceMap파일은 ts파일과 js파일을 연결하는 map파일을 생성할지 여부를 나타내는데 map파일을 생성하게 되면 브라우저에서 js파일의 내용에 브레이크 포인트를 걸때 ts에도 동일한 소스코드에 같이 브레이크포인트를 걸게끔 만들어 주는 등 소스코드 디버깅에 도움을 받을 수 있습니다.