TypeScript - tsconfig.json

 

 

이번 포스팅에서는 tsconfig.json 파일 안에서 TypeScript를 설정하는 방식에 대해 알아보고자 한다.

 

 

VSCode 터미널에서 아래의 명령어를 통해 tsconfig.json 파일을 생성하거나 직접 tsconfig.json 파일을 만들어준다. 단, 자신의 프로젝트에서 루트 디렉토리 안에 tsconfig.json 파일을 만들어줘야 한다는 점을 주의하도록 하자.

tsc --init

 

참고)

npm install -D typescript ts-node @types/node

ts-node 라는 TypeScript 실행기를 사용해서 개발 환경에서 TypeScript로 작성된 파일을 실행시켜 볼 수 있다. 

 

 

tsconfig.json 설정 

tsconfig.json 파일의 여러 설정값들 중 기본적인 것들에 대해 간략히 알아보자.

{
    "include": ["src"],
    "exclude": ["node_modules"],
    "compilerOptions": {
        "outDir": "./build/",
        "esModuleInterop": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "strict": true,
        "target": "ES6",
        "removeComments": true,
        "lib": ["ES6"],
        "allowJs": true,
        "typeRoots": ["./node_modules/@types", "./@types"],
        "baseUrl": ".",
        "paths": {
            "@core/*": ["src/core/*"],
            "*": ["@types/*"]
        }
    }
}

 

• include  :  TypeScript가 해당 디렉토리 안의 모든 파일을 확인한다는 것을 의미. TypeScript로 컴파일 할 시 포함할 파일과 포함하지 않을 파일을 구분할 수 있다.
• exclude  :  컴파일 대상에서 제외하는 설정값.
• compilerOptions
  • outDir  :  빌드한 파일( js 파일 )이 생성될 디렉토리 지정.
  • esModuleInterop  :  CommonJS 방식으로 내보낸 모듈을 ES 모듈 방식의 import로 가져올 수 있게 해준다. CommonJS 모듈을 ES6 모듈 코드베이스로 가져오려고 할 때 문제가 발생하는데 "esModuleInterop" : true 로 설정할 경우 ES6 모듈 사양을 준수하여 CommonJS 모듈을 가져올 수 있게 된다.
  • moduleResolution  :  모듈을 import 하거나 export 할 때 어떤 방식으로 처리할 것인가에 대한 설정이다. moduleResolution : "node" 로 설정해 놓도록 하자. 
  • resolveJsonModule  :  TypeScript는 기본적으로 JSON 파일 확인을 지원하지 않는다. JSON 파일을 가져오기 위한 설정값.
  • strict  :  엄격한 타입 확인 옵션 적용.
  • target  :  TypeScript를 컴파일 할 때 어떤 버전의 JavaScript로 변환할지 설정.
  • removeComments  :  컴파일 시 주석 제거.
  • lib  :  타입 정의 파일( .d.ts )이 목표로 하는 런타임 환경을 알려준다. 컴파일 된 JavaScript 파일이 어디에서 동작할 것인지 알려주는 설정값. 
    • ex ) "lib" : ["ES6", "DOM"]  -  es6를 지원하는 서버 환경과 DOM(브라우저 환경)에서 코드를 실행시키겠다는 의미.
  • allowJs  :  js 파일도 컴파일 대상이라는 의미. 프로젝트 내에서 점진적으로 TypeScript로 변환하기 위해 사용하는 설정값.
  • typeRoots  :  타입을 저장할 디렉토리 지정. typeRoots에 작성된 경로에서 정의되어 있는 타입을 찾게 된다. 만약 외부 라이브러리를 사용하게 되어 추가적인 타입들을 정의한다면 @types 와 같이 별도의 타입 디렉토리를 만들고 그 안에 .d.ts 파일을 생성한 뒤 디렉토리를 typeRoots에 추가해주면 된다. 이 때 경로는 tsconfig.json 파일이 있는 곳에서부터 상대 경로로 작성하면 된다.
  •  baseUrl  :  외부 모듈이 아닌 이상 상대 경로로 모듈을 가져와야 한다. baseUrl은 외부 모듈이 아닌 모듈들을 가져올 때 절대 경로로 참조할 수 있게 해준다. 만약 baseUrl 을 "src"로 설정할 경우, src/ 를 기준으로 절대 경로로 모듈 참조가 가능해진다.
  •   paths  :  모듈을 참조할 때 baseUrl 을 기준으로 다시 매핑시킬 수 있다. 경로에 별칭을 붙여서 사용하는 것 역시 가능하다. 
    • baseUrl 을 기준으로 절대 경로를 설정한 다음 해당 경로에 별칭을 붙여 사용 가능.
    • " @core/* " : [" src/core/* "]  -  @core/ 라는 별칭은 src 디렉토리 안에 있는 /core 디렉토리 안의 모든 파일.

 

 

👉 tsconfig.json  :  paths 옵션

tsconfig.json 파일 안에서 paths 옵션값으로 경로에 alias를 사용한 경우 ts-node (TypeScript 실행기) 로 ts 파일을 실행시켰을 때 에러가 발생할 수 있다. 위에 있는 tsconfig.json 파일을 기준으로 다음과 같이 디렉토리가 구성되어 있다고 하자.

// index.ts 파일

import { a } from '@core/utils/utils';
console.log(a);

// utils.ts 파일

export const a = 10;

ts-node index.ts 로 실행할 경우 에러가 발생하게 된다. tsconfig-paths 라이브러리를 추가로 설치해 준 뒤 다음과 같은 명령어로 실행시켜본다면 에러 없이 제대로 실행될 것이다.

npm install -D tsconfig-paths

npx ts-node -r tsconfig-paths/register [파일명]

 

 

👉 tsconfig.json  :  "ts-node" 설정

tsconfig.json 파일 안에서 다음과 같은 설정값을 추가해 주도록 하자.

"ts-node": {
    "files": true,
    "require": ["tsconfig-paths/register"]
}

"files": true 옵션을 통해 타입 정의 파일 안에서 declare 한 타입들을 ts-node가 찾을 수 있도록 할 수 있다. 

"require": ["tsconfig-paths/register"] 옵션을 통해 npx ts-node -r tsconfig-paths/register [파일명] 으로 입력하던 명령어에서 -r tsconfig-paths/register 부분을 생략하고 npx ts-node [파일명] 으로만 입력해도 작동되게끔 할 수 있다. 

{
    "exclude": ["node_modules"],
    "compilerOptions": {
        "outDir": "./build/",
        "esModuleInterop": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "strict": true,
        "target": "ES6",
        "removeComments": true,
        "lib": ["ES6"],
        "allowJs": true,
        "typeRoots": ["./node_modules/@types", "./@types"],
        "baseUrl": ".",
        "paths": {
            "@core/*": ["src/core/*"],
            "*": ["@types/*"]
        }
    },
    "ts-node": {
        "files": true, // 전역 상태로 declare한 type들을 ts-node에서 찾을 수 있게끔 한다.
        "require": ["tsconfig-paths/register"]
    }
}