[TypeScript] tsconfig.json 이해하기

보통 개발환경 세팅을 할 때 CRA(Create-React-App), Vite, CNA(Create-Next-App)과 같이 간단하게 프로젝트를 구성할 수 있는 방법을 많이 사용하다보니 tsconfig.json 파일을 직접 작성할 경우가 많이 없었던 것 같습니다.

혹은 TypeScript만으로 프로젝트를 한다고 해도 tsc -init과 같은 명령어를 이용해서 세팅하고 자세히 들여다 보는 경우가 없어서 tsconfig.json 파일의 옵션들에 대해서 제대로 알기가 어려웠는데 이번에 react-world 프로젝트를 진행하면서 다시 찾아보게 되었습니다.

아래 소스코드는 react-world 프로젝트에서 작성한 tsconfig.json 파일입니다.

 

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "isolatedModules": true,
  },
  "include": ["**/*.ts"],
  "exclude": ["node_modules"]
}

compilerOptions에는 TypeScript 코드를 JavaScript로 컴파일 하는 경우에 사용하는 옵션들이 담겨있습니다.

 

target: TypeScript 코드를 JavaScript의 어떤 버전으로 컴파일 할 것인지 지정해준다. babel과 같이 트랜스컴파일을 할 수 있는데, 일반적으로 브라우저 호환성을 위해 es5로 설정을 한다.

 

lib: TypeScript 코드를 JavaScript 코드로 컴파일 하는 과정에서 사용할 라이브러리들의 목록을 나열한다. dom은 DOM과 관련된 라이브러리를 말하고 dom.iterable은 iteration에 관련된 라이브러리를 말한다. esnext는 최신 자바스크립트 문법을 사용할 수 있도록 해줍니다.

 

skipLibCheck: d.ts 파일들의 타입 체킹을 건너뛰도록 설정하여 컴파일 시간을 단축시킬 수 있습니다.

 

strict: 모든 엄격한 타입 검사 옵션을 활성화 합니다. 해당 옵션의 경우 타입스크립트의 타입 체킹을 효과적으로 사용하기 위해 무조건 사용하는 것이 권장됩니다.

 

forceConsistentCasingInFileNames: 파일을 import할 때 대소문자가 맞지 않는 경우에는 에러를 뱉습니다. default값은 true이지만 명시적으로 작성해주었습니다.

 

noEmit: 컴파일시에 JavaScript 코드를 생성하지 않고, 타입 검사만 수행하고 싶을때 사용합니다.

 

esModuleInterop: CommonJS 형식으로 작성된 모듈을 ESM 방식으로 사용할 수 있도록 해줍니다.

 

module: 컴파일 결과의 모듈 시스템을 결정합니다. esnext의 경우 ESM을 의미합니다.

 

moduleResolution: tsc가 각 import가 어떤 모듈을 의존하고 있는지 해석하는 과정을 어떻게 정의할지를 나타냅니다.

 

isolatedModules: 각 파일을 분리된 모듈로 간주하여 처리하도록 합니다. 따라서 컴파일 과정에서 각 파일이 다른 파일의 상태나 스코프에 의존하지 않도록 합니다.

 

include: 타입스크립트가 컴파일을 할 파일들의 경로를 지정해줍니다. '**/*.ts'의 경우에는 디렉토리 전체에서 .ts 확장자를 가진 파일을 컴파일한다는 의미입니다.

 

exclude: include 옵션에 들어가있는 경로중에서 제외할 파일을 표시해줍니다. node_modules의 경우에는 컴파일을 할 필요가 없기 때문에 제외해주었습니다.