tsconfig.json 에 대해 알아보자

tsconfig.json 파일은 TypeScript 프로젝트 설정을 위한 핵심적인 구성 파일입니다. 이 파일은 TypeScript 컴파일러에게 어떻게 TypeScript 코드를 JavaScript로 변환할지 지시합니다. tsconfig.json 파일에는 다양한 속성들이 있으며, 각각의 속성은 프로젝트의 컴파일 과정에 중요한 역할을 합니다.

Next.js( v14.0.1 ) 의 tsconfig.json

// Next.js 앱 생성
npx create-next-app@latest

// tsconfig.json
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

Vite(v5.0.8) 의 tsconfig.json

// yarn 앱 생성
yarn create vite

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

1. `compilerOptions`

compilerOptions는 TypeScript 설정 파일인 tsconfig.json에서 가장 중요한 부분 중 하나로, TypeScript 컴파일러의 동작을 다양한 방식으로 제어합니다. 이 섹션에는 TypeScript 코드를 어떻게 컴파일할지 결정하는 다양한 옵션이 포함되어 있습니다. 아래에서는 compilerOptions의 주요 옵션들에 대해 좀 더 자세히 설명하겠습니다.

target: 컴파일된 JavaScript 코드의 ECMAScript 대상 버전을 지정합니다. 예를 들어, es5, es6 (또는 es2015), es2016 등이 있습니다. 이 설정은 컴파일러가 사용할 JavaScript 기능 수준을 결정합니다.
module: 사용할 모듈 시스템을 지정합니다. 예를 들어, CommonJS, AMD, System, UMD, ES6, ES2015, ESNext 등이 있습니다. Node.js 프로젝트의 경우 CommonJS가 일반적입니다.
lib: 컴파일러가 사용할 기본 타입 선언과 내장 라이브러리 (예: DOM, ES6 기능 등)를 지정합니다. 예를 들어 ["dom", "es2015"]와 같이 설정할 수 있습니다.
outDir: 컴파일된 JavaScript 파일이 저장될 디렉토리를 지정합니다. 예를 들어, ./dist로 설정하면 모든 컴파일된 파일들이 dist 폴더에 저장됩니다.
outFile: 모든 글로벌 (script 태그로 불러오는) 스크립트를 단일 JavaScript 파일로 합치고자 할 때 사용합니다.
allowJs: JavaScript 파일 (*.js)을 TypeScript 프로젝트에 포함시킬지 여부를 결정합니다.
checkJs: JavaScript 파일에 대해 타입 체킹을 활성화합니다.
jsx: JSX 지원을 위한 설정입니다. react, react-native, preserve 등이 있으며, 주로 React 프로젝트에서 사용됩니다.
declaration: .d.ts 선언 파일을 생성합니다. 라이브러리를 작성할 때 유용합니다.
sourceMap: 컴파일된 코드와 원본 TypeScript 코드를 연결하는 소스 맵을 생성합니다. 디버깅에 유용합니다.
strict: 모든 엄격한 타입 검사 옵션을 활성화합니다. 이것은 noImplicitAny, noImplicitThis, strictNullChecks, strictFunctionTypes 등의 옵션을 포함합니다.
noImplicitAny: 타입을 명시하지 않은 경우 any 타입으로 추론하는 것을 허용하지 않습니다.
noImplicitThis: this 표현식이 암묵적으로 any 타입을 갖는 것을 허용하지 않습니다.
strictNullChecks: null과 undefined를 엄격하게 체크합니다.
target: 컴파일된 JavaScript 코드의 ECMAScript 버전을 지정합니다 (예: es5, es6, es2017 등).
module: 모듈 시스템을 정의합니다 (예: CommonJS, AMD, ES6 등).
lib: 컴파일에 포함할 라이브러리를 지정합니다. 예를 들어, dom, es6 등이 있습니다.
outDir: 컴파일된 파일들이 저장될 디렉토리를 지정합니다.
strict: 모든 엄격한 타입 체킹 옵션을 활성화합니다.
noImplicitAny: 암시적 any 타입을 허용하지 않도록 설정합니다.
sourceMap: 소스 맵을 생성하여 디버깅을 용이하게 합니다.

2. `include`와 `exclude`

이 속성들은 각각 TypeScript 컴파일러가 처리해야 할 파일들과 제외해야 할 파일들을 지정합니다.

include: 컴파일 과정에 포함될 파일이나 디렉토리의 배열을 지정합니다.
exclude: 컴파일 과정에서 제외될 파일이나 디렉토리의 배열을 지정합니다.

3. `files`

특정 파일만 컴파일 과정에 포함시키려 할 때 사용합니다. include와 exclude보다 더 구체적입니다.

4. `extends`

다른 tsconfig 파일을 상속받을 수 있습니다. 프로젝트의 공통 설정을 재사용할 때 유용합니다.

5. `typeRoots`와 `types`

이 속성들은 타입 선언 파일들을 관리합니다.

typeRoots: 타입 선언 파일들이 있는 폴더를 지정합니다.
types: 컴파일러에 포함될 타입 선언 파일들을 배열로 지정합니다.

{
  "compilerOptions": {
    "target": "es5", // 컴파일 된 결과물이 어느 버전의 ECMAScript를 따를 것인지
    "lib": ["DOM", "DOM.Iterable", "ESNext"], // 컴파일 시 포함시켜야하는 javascript 내장 API들의 타입 정의에 대한 정보들
    "module": "esnext", // 프로그램에서 사용할 모듈 시스템. import/export 코드가 어떤 방식의 코드로 컴파일 될지 결정한다
    "allowJs": true, // js files를 허용할 것인가
    "jsx": "react", // jsx 코드를 어떻게 컴파일 할 것인가
    "baseUrl": "./", // 비상대적 import 모듈 해석시 기준이 되는 경로
    "moduleResolution": "Node", // 모듈 해석 전략. 웬만해선 node로 고정할 것
    "sourceMap": true, // map 파일을 생성할 것인가
    "esModuleInterop": true, // es module 사용시 컴파일 단계에서 헬퍼 함수를 사용할 것인가
    "strict": true, // strict family 속성 전부를 true로 할 것인가
    "noImplicitAny": false, // any 타입으로 구현된 표현식 혹은 정의를 에러처리 할 것인가
    "isolatedModules": true, // 각 파일을 분리된 모듈로 트랜스파일링할 것인가
    "forceConsistentCasingInFileNames": true, // 사용할 파일의 이름을 대소문자까지 정확하게 작성하도록 강제할 것인가
    "declaration": false, // d.ts 파일을 생성할 것인가
    "removeComments": true, // 컴파일시 주석을 제거할 것인가
    "pretty": true, // 에러와 메세지를 색, 컨텍스트를 사용해서 스타일을 지정할 것인가
    "strictFunctionTypes": true, // 함수, 메소드의 인자 타입을 더 정확히 추론할 것인가
    "skipLibCheck": true, // 사용하는 라이브러리의 타입 검사를 skip할 것인가
    "noImplicitThis": true, // any 타입으로 암시한 this 표현식에 오류를 보고할 것인가
    "noFallthroughCasesInSwitch": true, // switch문에서 fallthrough case가 발견되면 에러를 발생시킬 것인가
    "noImplicitReturns": true, // void가 아닌 함수가 리턴을 제대로 하지 않는 경우가 있다면 에러 발생
    "noEmit": true, // 컴파일러가 js 파일 등 출력 결과물을 만들지 않을 것인가
    "noEmitOnError": true, // 에러 발생시 js 소스코드, source map, declaration 등이 생성되지 않는다

    "noUnusedLocals": false,
    "downlevelIteration": true
    // 사용되지 않는 지역 변수에 대해 에러를 발생시킬 것인가
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

Next.js( v14.0.1 ) 의 tsconfig.json

Vite(v5.0.8) 의 tsconfig.json

1. compilerOptions

2. include와 exclude

3. files

4. extends

5. typeRoots와 types

1. `compilerOptions`

2. `include`와 `exclude`

3. `files`

4. `extends`

5. `typeRoots`와 `types`