Portfolio

tsconfig.json

해당 파일이 있으면 해당 폴더는 typescript 프로젝트의 최상단 폴더임을 알 수 있음

property

files: Include a list of files
include: 타입을 가져올 모듈의 리스트를 명시함


tsc // 해당 명령어로 실행 시, tsconfig.json을 찾아서 컴파일을 진행함
tsc <특정파일> // 해당 명령어로 실행 시, tsconfig.json 파일은 무시함

참고링크

compilerOptions


{
    "extends": "@tsconfig/node14/tsconfig.json",
    "compilerOptions": {
        "module": "CommonJS",
        "target": "es2020",
        "noImplicitAny": true,
        "preserveConstEnums": true,
        "outDir": "./build/functions",
        // "rootDir": "./src",
        "sourceMap": true,
        "baseUrl": ".",
        "lib": [
            "es2020"
        ],
        "typeRoots": [
            "../common/@types",
            "../node_modules/@types"
        ],
        "rootDirs": [
            "./",
            "../common/"
        ],
        "paths": {
            "/opt/nodejs/*": [
                "../common/*"
            ]
        }
    },
    "include": [
        "./functions/**/*"
    ],
    "references": [
        {
            "path": "../common"
        }
    ]
}

위 옵션에서 target과 module 은 결과로 나오는 Javascript 파일에 영향을 미치는 옵션임

target 은 어떤 JS 기능들이 downlevel될지, 어떤 기능이 그대로 남을지를 정하는 옵션
module은 module interact를 할 때 어떤 방식으로 할지를 정하는 옵션

typeRoots

By default all visible ”@types” packages are included in your compilation. Packages in node_modules/@types of any enclosing folder are considered visible. For example, that means packages within ./node_modules/@types/, ../node_modules/@types/, ../../node_modules/@types/, and so on. ( 디폴트로는 모든 @types 패키지가 컴파일에 다 포함됨)

If typeRoots is specified, only packages under typeRoots will be included. (typeRoots 명시하면 걔네만 컴파일 시에 포함함)

sourceMap

sourceMap 파일의 생성을 해주는 옵션

해당 파일이 있음으로 해서 debugger와 다른 툴들에서 TypeScript 원본 소스를 보여줄 수 있게 해줌(js파일로 작업하고 있을 때에)

sourceMap 파일의 확장자 : .js.map

생성되는 .js 파일에 sourceMap 파일의 위치를 나타내는 sourceMappingURL 코멘트 라인 추가됨


// helloWorld.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.helloWorld = "hi";
//# sourceMappingURL=// helloWorld.js.map

target

target을 바꾸면 lib의 default 값도 바뀌게 됨. target과 lib 셋팅을 원하는대로 mix and match 해야 할 수 있음. 편의를 위해 target 만 세팅할 수 도 있음

preserveConstEnums

이 값이 false 이면 const enum 선언이 js 파일에서는 삭제되게 됨

true 면 js에서 해당 const enum 선언이 변환되어 남아있음

baseUrl

import, require을 할 때 기준 경로에서 ../ 혹은 ./ 를 이용해서 import를 하는데 이러한 것을 없앨 수 있도록 상대경로 import 에서의 base directory path를 정하는 파라미터임

lib

포함할 라이브러리의 버전을 명시함

rootDirs

rootDirs를 이용함으로써, 컴파일러에게 하나의 루트처럼 동작하는 여러개의 가상 폴더를 알려줄 수 있음

이렇게 함으로써 컴파일러는 module을 임포트 할 때, 이러한 가상의 폴더에서 module resolve를 진행할 수 있음. 마치 이 가상의 폴더들이 하나의 폴더로 합쳐진 것처럼

paths

lets you declare how TypeScript should resolve an import in your require/imports.

위의 예시에서 ../common/*를 임포트하기 위해 /opt/nodejs/* 를 이용하면 되는 것임

include

프로그램에 포함할 파일이름과 패턴의 배열을 명시함. 이 파일들은 tsconfig.json을 포함하고 있는 폴더에서 바로 접근이 가능하게 됨

references

project reference를 이용하여 TypeScript 프로그램을 더 작은 조각들로 나누어서 구성할 수 있음

컴포넌트들 사이의 논리적인 구분을 할 수 있고, 코드를 나누어서 구성이 가능함

TsConfig Bases

bases

tsconfig • Updated Feb 23, 2023

위 링크에 base configuration이 존재함. 예를 들어 Node.js 12 version을 사용한다면 @tsconfig/node12를 이용해서 configuration을 진행할 수 있음


{
  "extends": "@tsconfig/node12/tsconfig.json",
  "compilerOptions": {
    "preserveConstEnums": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

tsconfig.json

Project Configuration

tsconfig.json

compilerOptions

TsConfig Bases