[TypeScript] tsconfig.json 알아보기

Rachaen·2023년 7월 3일

typescript

TypeScript 너란 애는 뭐니

목록 보기

3/3

개발하다보니 정작 tsconfig.json을 제대로 생각 안해본 거 같아서 정리를 해본다.

tsconfig.json이란?

프로젝트 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정해놓은 파일이다.

tsconfig 속성

전역 속성

파일의 최상위에 위치하고 있는 속성으로 주요 설정 옵션은 다음과 같다.

{
  "compilerOptions": {
    // 컴파일러 옵션들이 위치
  },
  "include": [
    // 컴파일에 포함될 파일 또는 디렉터리의 리스트
  ],
  "exclude": [
    // 컴파일에서 제외될 파일 또는 디렉터리의 리스트
  ],
  "files": [
    // 컴파일에 포함될 파일들의 리스트
  ]
  "extends": [
  	// 다른 tsconfig.json 파일의 설정
  ],
}

compilerOptions

컴파일 대상 파일들을 어떻게 변환할지 정하는 옵션이다.

files

프로젝트에서 컴파일할 파일들의 목록을 명시적으로 지정하는 속성이다. exclude보다 우선순위가 높다.

include

files 속성과 같이 프로젝트에서 컴파일할 파일들을 지정하는 속성이지만, 와일드 카드 패턴으로 저장한다는 차이점이 있다. exclude보다 우선순위가 낮기 때문에 include에 명시되어 있어도 exclude에 명시되어 있으면 제외 되게 된다.

exclude

프로젝트에서 컴파일 대상에서 제외할 파일들을 와일드카드 패턴으로 지정하는 속성이다. 일반적으로 빌드 또는 의존성 디렉터리와 같은 컴파일할 필요가 없는 항목을 제외하는데 사용된다.

extends

여러 타입스크립트 프로젝트에서 설정 파일을 공통으로 사용하거나 빌드용 타입스크립트 설정을 분리하고 싶을 때 사용한다.

compilerOptions

target: 컴파일된 JavaScript의 버전을 지정한다.
lib: 브라우저나 DOM API나 자바스크립트 내장 API를 위해 선언해 놓은 타입 선언 파일이다.
module: 컴파일된 코드의 모듈 시스템을 정의한다.
outDir: 컴파일된 파일들이 저장될 디렉터리를 지정한다.
rootDir: 입력 파일들이 있는 디렉터리를 지정한다.
strict: 엄격한 타입 검사 옵션을 한 번에 활성화한다.
noImplicitAny: 타입이 명시적으로 지정되지 않은 변수에 대해 오류를 발생시킨다.
noImplicitThis: this 타입이 암묵적으로 any 타입을 가리키면 에러를 표시한다.
strictNullChecks: null과 undefined 값이 모두 타입으로 취급되도록한다.
strictFunctionTypes: 함수의 파라미터 타입을 엄격하게 검사하다.
strictPropertyInitialization: 클래스 안에서 속성 타입이 정의되고 생성자에서 초기화까지 되어있는지 검사하는 옵션이다.
alwaysStrict: use strict 모드로 파일을 컴파일하고, 컴파일한 파일 위에 'use strict' 코드를 추가한다.
useUnknownInCatchVariables: try catch 구문에서 catch의 err 파라미터 타입을 unknown으로 변환해준다.
noEmitOnError: 컴피일 시 오류가 발생한 경우 컴파일 결과물을 생성하지 않는다.
esModuleInterop: CommonJS 모듈을 ECMAScript 모듈 형식으로 임포트할 때 추가적인 변환을 수행한다.

이 외에도 엄~~청 많다.

예시

아래는 내가 react 프로젝트에서 사용했던 tsconfig.json 파일이다.

{
  "compilerOptions": {
    "target": "ES6",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true
  },
  "include": ["src"]
}

"target": "ES6" : 컴파일된 코드의 ECMAScript 버전을 ES6(ES2015)로 지정
"baseUrl": ".": 모듈 해석을 시작할 기본 디렉토리를 현재 디렉토리로 설정
"paths": { "@/*": ["src/*"] } : 모듈 경로 별칭을 설정합니다. 이 경우 @를 사용하여 src 디렉토리를 참조할 수 있습니다.
"lib": ["dom", "dom.iterable", "esnext"] : 컴파일러가 사용할 라이브러리 파일을 지정합니다. 여기서는 DOM API, DOM Iterable, 그리고 ESNext 기능을 사용할 수 있습니다.
"allowJs": true : JavaScript 파일을 컴파일에 포함
"skipLibCheck": true : 타입 선언 파일의 타입 검사를 건너뜀
"esModuleInterop": true : CommonJS와 ES 모듈 간의 상호 운용성을 허용
"allowSyntheticDefaultImports": true : 기본 import를 사용하여 모듈을 가져올 수 있도록 허용
"strict": true : 모든 엄격한 타입 검사 옵션을 활성화
"forceConsistentCasingInFileNames": true : 파일 이름이 대소문자 일관성을 갖도록 강제
"noFallthroughCasesInSwitch": true : switch 문에서 case 절이 자동으로 다음 case 절로 진행되지 않도록 함
"module": "esnext" : 출력 파일의 JavaScript 모듈 형식을 설정합니다. 여기서는 최신의 ES 모듈 형식을 사용
"moduleResolution": "node" : Node.js 방식의 모듈 해석 알고리즘을 사용
"resolveJsonModule": true : JSON 파일을 import 할 수 있도록 허용
"isolatedModules": true : 각 파일을 분리된 모듈로 처리
"noEmit": true : 출력 파일을 생성하지 않습니다. 이 옵션은 주로 타입 검사만 수행하려는 경우에 사용됩니다.
"jsx": "react-jsx" : JSX를 지원하고, React 17 이상의 JSX 변환을 사용합니다.
"noImplicitAny": true : 암시적 'any' 타입을 허용하지 않습니다.
"noImplicitThis": true : 'this' 표현식이 암시적 'any' 타입을 가지도록 허용하지 않습니다.
"strictNullChecks": true : 엄격한 null 및 undefined 검사를 수행
"include": ["src"] : 컴파일에 포함될 파일과 디렉토리를 지정.