타입스크립트: Project Configuration

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

---

📌 tsconfig.json이란?

• What is a tsconfig.json
  https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#overview

• 해당 디렉터리가 Typescript 프로젝트의 루트임을 나타냅니다.
• input file 없이 tsc를 호출하면 현재 디렉토리에서부터, 상위 디렉토리 체인까지 계속해서 파일을 검색합니다.

  tsc

• input file 없이 --project(-p) 옵션을 사용해서 CLI 명령어를 사용 시, 디렉토리의 특정한 유효한 경로를 지정할 수 있습니다.

  tsc --p ./tsconfig.json

• 특정 input file을 지정하면, tsconfig.json은 무시됩니다.

  tsc input.ts // tsconfig.json을 무시하고 tsc 실행

---

📌 Compiler Options

다 읽을 자신이 없는 TSConfig Reference의 수백가지 구성 옵션
https://www.typescriptlang.org/tsconfig/

• --project: 구성 파일 경로 또는 'tsconfig.json'이 있는 폴더의 프로젝트를 컴파일하는 CLI 옵션입니다. (--build는 오래된 옵션입니다!)
• --init: TypeScript 프로젝트를 초기화하고 tsconfig.json 파일을 생성합니다.

# tsconfig.json 파일을 찾아 컴파일 실행
tsc

# 컴파일러 기본 설정으로 index.ts 파일만 JS로 변환
tsc index.ts

# src 폴더 내의 모든 .ts 파일을 컴파일러 기본 설정으로 JS로 변환
tsc src/*.ts

# tsconfig.production.json의 컴파일러 설정으로 파일 변환
tsc --project tsconfig.production.json

# 컴파일러 옵션(불리언) 표시하며 JS 파일에 대한 d.ts 파일 생성
tsc index.js --declaration --emitDeclarationOnly

# 컴파일러 옵션을 사용하여 두 파일을 하나의 index.js로 묶음
tsc app.ts util.ts --target esnext --outfile index.js
# - app.ts와 util.ts 파일을 컴파일
# - target은 esnext
# - index.js로 내보냄 (옵션을 사용하지 않으면 각 TypeScript 파일마다 개별 JavaScript 파일이 생성)

---

📌 TypeScript 컴파일러에서 사용되는 옵션: --build와 --project

--build (-b)

• --build 옵션은 트랜스파일링(transpiling)과 같은 프로젝트 참조(project references)를 지원합니다.
• 프로젝트 내에서 변경된 파일만 다시 컴파일하므로 전체 프로젝트를 매번 컴파일할 필요가 없어 빌드 시간을 단축할 수 있습니다.
• 이 옵션은 tsconfig.json 파일에 정의된 프로젝트 설정을 사용합니다.

--project (-p)

• --project 옵션은 특정 TypeScript 프로젝트의 tsconfig.json 파일을 지정할 때 사용합니다.
• 이 옵션을 사용하면 지정된 프로젝트에 대해서만 TypeScript 컴파일러가 작동합니다.
• 프로젝트 경로를 명시적으로 제공하지 않으면 현재 작업 디렉터리에 있는 tsconfig.json 파일을 사용합니다.

---

📌 --noEmitOnError

https://www.typescriptlang.org/tsconfig/#noEmitOnError
Do not emit compiler output files like JavaScript source code, source-maps or declarations if any errors were reported.

This defaults to false, making it easier to work with TypeScript in a watch-like environment where you may want to see results of changes to your code in another environment before making sure all errors are resolved.

• 오류가 보고된 경우 컴파일러 파일을 출력하지 않습니다.
  • (JavaScript 소스 코드, 소스 맵 또는 선언과 같은 컴파일러 출력 파일)
• 모든 오류 해결을 확인하기 전에, 다른 코드 변경을 확인할 수 있는 watch-like environment에서 타입스크립트 작업을 진행하기 쉬워집니다.

---

📌 Project References (TS 3.0)

• 프로젝트 참조는 프로젝트를 더 작은 조각으로 쪼갤 수 있습니다.
• references, composite, declarationMap, prepend, outFile를 설정해 증분 빌드를 진행할 수 있습니다.
  https://www.typescriptlang.org/docs/handbook/project-references.html
• tsconfig.json에서 references 속성으로 tsconfig.json을 포함한 디렉토리를 참조할 수 있습니다.

{
    "compilerOptions": {
        // The usual
    },
    "references": [
        { "path": "../src" }
    ]
}

---

📌 Configuring Watch (TS 3.8)

• 파일과 디렉터리를 감시하는 방법을 제어하는 구성입니다.
• --watch를 실행하기 위해 tsconfig.json을 설정합니다.
  https://www.typescriptlang.org/docs/handbook/configuring-watch.html