[TypeScript] tsconfig.json

1. 예시

{
  "exclude": ["node_modules"], // typeScript 컴파일 제외할 폴더
  "compilerOptions": {
    "outDir": "./build/",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "strict": true,
    "target": "ES6",
    "removeComments": true,
    "lib": ["ES6", "DOM"],
    "allowJs": true,
    "typeRoots": ["./node_modules/@types", "./@types"],
    "baseUrl": ".",
    "paths": {
      "@myUrl/*": ["src/views"],
      "*": ["@types/*"]
    }
  },
  "ts-node": {
    // ts-node설정값
    "files": true, // 전역 상태로 declare한 type들을 ts-node에서 찾을수 있게 해준다.
    "require": ["tsconfig-paths/register"]
  }
}

2. 각 요소 설명

include : typeScript가 해당 디렉토리 안에 모든 파일을 확인한다는 것을 의미한다.

typeScript로 컴파일 할때 포함할 파일과 포함하지 않을 파일을 구분할 수 있다.

 

exclude : 컴파일 대상에서 제외하는 설정값

 

compilerOptions : 컴파일 대상 파일들을 어떻게 변환할지 세세히 정하는 옵션

 

outDir : 빌드한 파일(js파일)이 생성될 디렉토리 지정

 

exModuleInterop : commonJS 방식으로 내보낸 모듈을 ES모듈 방식의 import로 가져올수 있게 해준다.

commonJS 모듈을 ES6 모듈 코드 베이스로 가져오려고 하면 문제가 발생하는데 

exModuleInterop : true 로 설정해주면 ES6모듈 사양을 준수해서 commonJS모듈을 가져올수 있게 된다.

 

moduleResolution : 모듈을 import하거나 export할때 어떤 방식으로 처리할지 결정한다.

 

strict : 엄격모드 사용할건지

 

removeComments : 컴파일시 주석 제거

 

lib : 타입정의 파일 (.d.ts)이 목표로 하는 런타임 환경을 알려준다. 컴파일 된 JS파일이 어디서 동작할 것인지 알려주는 설정값이다. 예를 들어 ["ES6", "DOM"] => ES6 을 지원하고 DOM(브라우저 환경)에서 코드를 실행시키겠다는 의미이다.

 

allowJs : js파일도 컴파일 대상이라는 의미, 프로젝트 내에서 점진적으로 typeScript로 변환하기 위해 사용하는 설정값

 

typeRoots : 타입을 저장할 디렉토리 지정. typeRoot에 작성된 경로에서 정의되어 있는 타입을 찾게 한다.

만약 외부 라이브러리를 사용해서 추가적인 타입을 정의한다면 @type과 같이 별도의 타입 디렉토리를 만들고 그안에

.d.ts 파일을 생성한뒤 디렉ㅌ토리를 typeRoot에 추가하면 된다. 경로는 tsconfig.json에서 상대경로로 작성한다.

 

baseUrl : 외부 모듈이 아닌 이상 상대경로로 모듈을 가져와야 하는데 baseUrl은 외부 모듈이 아닌 모듈을 가져올때 절대 경로로 참조할수 있게 해준다. 만약 src폴더를 설정한 경우에 src/를 기준으로 절대경로로 모듈참조가 가능하다.

 

paths : 모듈을 참조할 때 baseUrl을 기준으로 다시 매핑하고 경로에 별칭을 붙여서 사용하는것이 가능하다.

" @myPaths/* " : ['src/views/*'] => @myPaths/ 라는 별칭으로 src디렉토리 안에 있는 /views 디렉토리 안의 파일 설정 가능