tsconfig.json 전역 속성

{
  "compilerOptions": {},
  "include": [],
  "exclude": []
}

• compilerOptions: 타입스크립트 파일을 진행할 때 어떤 형태로 컴파일을 진행할 지 속성을 정의하는 옵션이다.
• include: 컴파일을 진행할 파일들을 지정하는 속성이다.
  • 와일드 카드 패턴으로 지정한다.
  • include에 명시되어 있어도 exclude에 명시되어 있으면 제외된다.
• exclude: 컴파일 대상에서 제외할 파일들을 와일드 카드 패턴으로 지정하는 속성이다.

예시

{
  "compilerOptions": {...},
  "include": ["src/**/*"],
  "exclude": ["**/*.test.ts"]
}

src의 모든 파일과 디렉토리의 컴파일을 진행한다.
모든 디렉토리에서 .test.ts가 포함된 파일은 컴파일을 제외한다.

compilerOptions 옵션

  "compilerOptions": {
    "module": "CommonJS",
    "outDir": "./dist",
    "target": "ES6",
    "esModuleInterop": true,
    "strict": true,
    "baseUrl": "./src",
    "paths": {
      "@user/*": ["user/*"]
    }
  }

• module: 사용할 모듈 시스템을 설정한다.
• outDir: 컴파일된 js 파일들을 담을 디렉토리를 지정한다.
• target: 어떤 버전의 JavaScript로 컴파일 할것인지 지정한다.
• esModuleInterop: commonjs 모듈 시스템과 es6 모듈 시스템 간 호환성을 제공한다.
• strict: 엄격한 타입 검사를 사용할지 여부를 지정한다.
• baseUrl: import 구문 사용시 모듈의 기준 경로를 지정한다. baseUrl을 설정하면 상대 경로 대신 baseUrl을 기준으로 모듈을 찾는다.
• paths: baseUrl에 상대적인 모듈 경로를 지정하는 옵션이다.

module

 "compilerOptions": {
    "module": "CommonJS"
 }

사용할 모듈 시스템을 설정한다.
CommonJS | ES6 | ES2015 ...

outDir

컴파일된 js 파일들을 담을 디렉토리를 지정한다.
디렉토리가 존재하지 않으면 생성이 된다.

 "compilerOptions": {
    "outDir": "./dist"
 }

target

어떤 버전의 JavaScript로 컴파일 할 것인지 지정한다.
ES6 | ES5 | ES2015 ...

 "compilerOptions": {
    "target": "ES6"
 }

esModuleInterop

commonjs 모듈 시스템과 es6 모듈 시스템 간 호환성을 제공한다.
es6 모듈 시스템은 default export와 named export를 지원하지만 commonjs 모듈 시스템은 default export를 지원하지 않고 named export만을 지원한다.
그래서 commonjs 모듈 시스템을 사용하는 파일에서 es6 모듈 시스템을 사용하는 모듈을 import 할 때 named import 형태로만 import가 가능하다.
하지만 esModuleInterop 옵션을 true로 활성화하면 TypeScript는 default export를 named export로 변환하여 import 할 수 있도록 해준다.

"compilerOptions": {
  "esModuleInterop": true
}

이 옵션을 설정하면
commonjsModule.js

module.exports.default = {
  foo: 'foo',
  bar: 'bar'
};

아래와 같이

import myModule, { foo, bar } from './commonjsModule';

import { default as myModule, foo, bar } from './commonjsModule';

default export를 가져올 수 있다.

strict

"compilerOptions": {
    "strict": true
}

엄격한 타입 검사를 사용할지 여부를 지정한다.
이 옵션을 쓰지않는 것은 타입스크립트를 쓰지 않는 다는 것과 같다고 한다.

baseUrl

 "compilerOptions": {
    "baseUrl": "./src"
 }

import 구문 사용시 모듈의 기준 경로를 지정한다. baseUrl을 설정하면 상대 경로 대신 baseUrl을 기준으로 모듈을 찾는다.

paths

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

baseUrl에 상대적인 모듈 경로를 지정하는 옵션이다.
paths를 설정하면 모듈 이름을 짧게 줄이고 중복되는 경로를 피할 수 있다.
paths에는 패턴과 목적지 경로를 함께 지정한다.
패턴은 *을 사용하여 와일드 카드 패턴을 지정할 수 있고 목적지 경로는 baseUrl을 기준으로 상대 경로로 지정한다.
위 옵션을 적용하면

import { UserService } from "../../user/service/user.service.ts"

위 줄을 아래와 같이 줄일 수 있다.

import { UserService } from "@user/service/user.service.ts"

이 파일을 컴파일하면

const user_service_1 = __importDefault(require("@user/service/user.service"))

위와 같이 경로에 @가 들어간다.

tsc-alias

위와 같은 문제 때문에 tsc-alias 모듈을 설치해 한번 더 컴파일을 해줘야 한다.

npm install -D tsc-alias

npx tsc-alias

참고

https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-tsconfigjson-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-%EC%B4%9D%EC%A0%95%EB%A6%AC#esmoduleinterop