[번역]The TSConfig Cheet Sheet

•9 min read
TypeScript
Back

원글: https://www.totaltypescript.com/tsconfig-cheat-sheet (opens in a new tab)

tsconfig.json은 엄청나게 많은 잠재적 옵션을 가진 거대한 파일로, 많은 사람들을 두렵게 합니다.

하지만 실제로 주의해야 할 구성 옵션은 몇 가지뿐입니다. 이 옵션들을 파악하고 치트시트를 작성해 보겠습니다.

Quickstart

코드만 원하신다면 여기 있습니다:

{
  "compilerOptions": {
    /* 기본 옵션: */
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "es2022",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,
    "verbatimModuleSyntax": true,
 
    /* 엄격함(Strictness) */
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
 
    /* TypeScript로 트랜스파일링하는 경우: */
    "module": "NodeNext",
    "outDir": "dist",
    "sourceMap": true,
 
    /* 라이브러리를 위해 빌드하는 경우: */
    "declaration": true,
 
    /* 모노레포에서 라이브러리를 위해 빌드하는 경우: */
    "composite": true,
    "declarationMap": true,
 
    /* TypeScript로 트랜스파일링하지 않는 경우: */
    "module": "preserve",
    "noEmit": true,
 
    /* 코드가 DOM에서 실행되는 경우: */
    "lib": ["es2022", "dom", "dom.iterable"],
 
    /* 코드가 DOM에서 실행되지 않는 경우: */
    "lib": ["es2022"]
  }
}

전체 설명

기본 옵션

아래는 모든 프로젝트에 권장되는 기본 옵션입니다.

{
  "compilerOptions": {
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "es2022",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,
    "verbatimModuleSyntax": true
  }
}

엄격함(Strictness)

모든 프로젝트에 권장되는 엄격함 옵션입니다.

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true
  }
}

많은 사람들이 tsconfig/bases (opens in a new tab)에서 엄격함 옵션을 추천했습니다.이는 TSConfig 옵션을 카탈로그화한 훌륭한 저장소입니다. 해당 옵션들은 noImplicitReturns, noUnusedLocals, noUnusedParameters, noFallthroughCasesInSwitch와 같이 너무 시끄럽다(noisy)고 생각하는 많은 규칙을 포함하고 있기 때문에, 이 규칙들을 원하는 경우에만 tsconfig.json에 추가하는 것을 추천합니다.

TypeScript로 트랜스파일링

tsc로 코드를 트랜스파일링(JavaScript 파일 생성)하는 경우, 다음 옵션이 필요합니다.

{
  "compilerOptions": {
    "module": "NodeNext",
    "outDir": "dist"
  }
}

라이브러리를 위한 빌드

라이브러리를 위해 빌드하는 경우, declaration 옵션을 활성화하여 타입 정의 파일을 생성할 수 있습니다.

{
  "compilerOptions": {
    "declaration": true
  }
}

모노레포에서 라이브러리를 위해 빌드하는 경우

모노레포 구조에서 여러 라이브러리를 관리할 때는 아래와 같은 옵션들이 필요합니다.

{
  "compilerOptions": {
    "declaration": true,
    "composite": true,
    "sourceMap": true,
    "declarationMap": true
  }
}

TypeScript로 트랜스파일링하지 않는 경우

TypeScript를 Linter로 사용하는 등, tsc를 사용할 때 JavaScript로 트랜스파일링하지 않으려면 아래의 옵션을 사용합니다.

{
  "compilerOptions": {
    "module": "preserve",
    "noEmit": true
  }
}

코드가 DOM에서 실행되는 경우

웹 브라우저에서 코드를 실행할 때는 lib 옵션을 사용하여 DOM 관련 타입을 포함시킵니다.

{
  "compilerOptions": {
    "lib": ["es2022", "dom", "dom.iterable"]
  }
}

코드가 DOM에서 실행되지 않는 경우

서버 사이드나 Node.js 환경에서 코드를 실행할 때는 DOM 관련 타입을 제외할 수 있습니다.

{
  "compilerOptions": {
    "lib": ["es2022"]
  }
}

변경 로그

TypeScript가 진화하고 재사용 가능한 tsconfig.json에 대한 내 견해를 정제함에 따라 이 치트시트를 업데이트해 왔습니다. 여기에 변경 로그가 있습니다:

출처

해당 번역은 ChatGPT의 도움을 받아 번역되었습니다.

© freejak5520. All rights reserved.