tsconfig 옵션에 대해 알아보자

tsconfig에서 알아두면 좋은, 거의 기본처럼 쓰이는 옵션을 정리해보자!

allowJs

default: false

*.js파일도 컴파일 목록에 포함시킬지 결정한다.

allowJs: false

js파일 import시 선언 파일을 찾을 수 없다는 에러가 발생한다.

allowJs: true로 변경하면 에러가 발생하지 않고 정상적으로 컴파일할 수 있다.

baseUrl

non-relative 경로를 사용할 때의 기본 경로를 지정해준다.

jsconfig.json

./src/greet를 절대경로로 사용하고 싶을 때

./src를 baseUrl로

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@greet/*": ["./greet/*"]
    }
  }
}

root를 baseUrl로

{
  "compilerOptions": {
    "outDir": "dist",
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "allowJs": true,
    "baseUrl": "./",
    "paths": {
      "@greet/*": ["./src/greet/*"]
    }
  }
}

경로 사용

import hello from "@greet/hello";
import bye from "@greet/bye";

const greet = () => {
  return hello() + bye();
};

export default greet;

outDir

compile 결과물의 출력 파일의 위치를 명시한다.

allowJs

왼쪽 : "outDir": "dist" / 오른쪽 : 설정X

declaration

타입 정의 파일 (*.d.ts)를 생성한다.

declaration

왼쪽 : "declaration": false 또는 미설정/ 오른쪽 : "declaration": true

include & exclude

기본적으로 TypeScript는 exclude 되지 않은 모든 TypeScript 파일 (.ts, .d.ts, .tsx)을 컴파일한다.

또한 exclude가 지정되지 않으면 outDir속성으로 명시된 폴더가 자동으로 제외되기 때문에 exclude를 사용하면 dist 디렉토리를 꼭 명시해줘야 한다.

exclude 사용
```
{
  "compilerOptions": {},
  "exclude": ["dist", "./src/greet"]
}
```
위처럼 dist를 exclude에 제외하고 특정 폴더를 명시해줘서 컴파일 대상에서 제외할 수 도 있다.

그런데 지금 index.ts에서 greet를 사용한다면 결과는 어떻게 될까???

exclude가 무시되어 정상적으로 컴파일된다.

dist를 명시하지 않았을 때의 결과이다. dist가 없는 상태라면 동일한 결과가 나오겠지만, 호출할 때 마다 dist가 중첩된 형태로 생성된다.

EarlyHail

tsconfig 옵션에 대해 알아보자 - 2

allowJs

baseUrl

outDir

declaration

include & exclude