Eojin Han

공식 문서 : https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

TSconfig 레퍼런스 : https://www.typescriptlang.org/tsconfig

번역 : https://joshua1988.github.io/ts/config/tsconfig.html

tsconfig란?

타입스크립트 설정 파일은 타입스크립트를 자바스크립트로 변환할 때의 설정을 정의해놓는 파일.

프로젝트에서 tsc라는 명령어를 치면 타입스크립트 설정 파일에 정의된 내용을 기준으로 변환 작업(컴파일)을 진행합니다.

tsconfig.json 파일 생성


$ tsc --init

TS→JS 변환

tconfig.json 설정 후 아래 명령어를 입력하면, 프로젝트의 모든 ts파일이 js파일로 변환된 결과를 볼 수 있다.


// tsconfig.json 파일 설정 후 아래명령어를 입력하면 프로젝트 전체가 TS->JS 변환됨
// -w는 watch 모드, 업데이트 마다 바로 반영됨
$ tsc -w

// 특정 파일만 JS로 변환시키고 싶다면
$ tsc 특정파일명시 -w

TS→JS로 변환은 됐지만, 같은 경로에 TS,JS파일이 다 있다..-_-

JS변환 파일 폴더 별도로 지정하기

위의 예시처럼, TS로 작성된 곳에 그대로 JS변환 파일이 위치하게 되면 헷갈리기 쉽상이다.

또한 JS로 작성한 파일이 섞여있는 경우 더욱 혼란스럽다.

따라서 TS→JS로 변환된 파일을 모아두는 디렉토리 경로를 별도로 지정하는 것이 좋다.

"outDir": "./build" : 변환된 JS파일을 저장할 경로를 지정함

최상위 경로 판단

💡

tsconfig.json 파일이 위치한 곳에서부터 첫번째로 ts 파일을 만나는 위치를 루트로 생각하므로 아래처럼 src폴더안에 ts파일들을 정리해놔도 build에는 src폴더없이 js변환 파일들만 위치한다.

최상위 경로가 2개 이상이라면?

💡

주의 : 최상위 경로가 하나가 아닌 경우에는 폴더구조가 그대로 유지된다. ⇒ 보통은 src 폴더를 루트로 두고, src폴더 안에서 구조를 나눈다.

root 경로를 지정하고, 그 밖에선 ts파일을 만들 수 없도록 설정

실수로 다른 개발자가 src디렉토리 바깥에서 ts파일을 생성했을 경우, src디렉토리도 build에 생기면서 꼬이게 되므로, 그것을 방지하고자 옵션을 추가함.

"rootDir": "./src" : 루트디렉토리는 무조건 ./src이므로, 모든 ts파일은 src디렉토리 안에 있어야한다고 에러를 띄울 수 있게됨.

속성


{
  "compilerOptions": {
    /* Basic Options */
    "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
    "lib": [
      "es2017"
    ] /* 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": "react-native" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
    "declaration": true /* Generates 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. */
    // "removeComments": true,                //JS변환 시 주석 삭제 /* Do not emit comments to output. */
    "noEmit": true /* Do not emit outputs. */,
    // "incremental": true,                   //이전빌드결과를 기억하고있다가 바뀐부분만 새롭게 빌드함으로써 빌드시간 단축./* Enable incremental compilation */
    // "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. */
    // "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. */

    /* 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'. */
      "*": ["./@t`ypes/*"],
      "@components/*": ["./components/*"],
      "@recoil/*": ["./recoil/*"],
      "@screens/*": ["./screens/*"],
      "@navigations/*": ["./navigations/*"]
    },
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    "typeRoots": [
      "./@types",
      "./node_modules/@types"
    ] /* 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. */
    "skipLibCheck": false /* Skip type checking of declaration files. */

    /* 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. */
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

TSConfig 설정