tsconfig.json 구성 옵션

@2023/09/21

안녕하세요 lika-7입니다

이번 시간에는 TypeScript의 구성 옵션에 대해서 설명 하겠습니다

tsconfig.json란

tsconfig.json는 TypeScript 프로젝트의 설정 파일 입니다.

프로젝트를 생성 할 때 기본적으로 tsconfig.json를 구성하여 컴파일러에게 프로젝트를 어떻게 컴파일하고 설정할지 알려줍니다.

tsconfig.json의 구성

//JSON
//tsconfig.json

{
    "compilerOptions": {
        "target": "ES2015", //자바스크립트 2015버전으로 변환 하겠다
        "module": "ESNext", //모듈은 자바스크립트의 최신버전으로 사용하겠다
        "moduleResolution": "Node", //?
        "esModuleInterop": true, //esm.js와 common.js 다 사용가능하도록
        "lib": ["ESNext","DOM"], //컴파일 할 때 선택하는 라이브러리
        "strict": true //문법을 정확히 지켜 써라
    },
    "include": [ // 포함할 파일
        "src/**/*.ts"
    ],
    "exclude": [ //제외할 파일
        "node_modules"
    ]
}

tsconfig.json 파일안에는 기본적으로 3가지 옵션을 넣습니다

1. compilerOptions

2. include

3. exclude

compilerOptions

💡

compilerOptions는 만들어진 TypeScript 파일을 JavaScript로 변환 할 때 어떤 기준을 가지고 컴파일지를 적는 부분입니다.

"compilerOptions": {
    //컴파일될 ES(JS) 버전 명시 - "ES2015" 권장
    "target": "ES5", 
    // 모듈 시스템 지정 - "CommonJS", "AMD", "ESNext"
    "module": "CommonJS",
    //모듈 해석 방식 지정 - "Node", "Classic"
    "moduleResolution": "Node",
    //ESM 모듈 방식 호환성 활성화 여부
    "esModuleInterop": false, 
    //모든 파일을 모듈로 컴파일, import 혹은 export 키워드 필수
    "isolatedModules": false,
    //모듈 해석에 사용할 기준 경로 지정
    "baseUrl": "./",
    //컴파일러가 참조할 타입 선언(d.ts)의 경로를 지정
    "typeRoots": ["./node_modules/@types"],
    //컴파일러에서 사용할 라이브러리 지정 - "ESNext", "DOM"
    "lib": [], 
    //엄격한 타입 검색 활성화
    "strict": false
},

💡

따로 값들을 지정하지 않으면 위의 값이 기본으로 적용됩니다.

target

"target": "ES2015", 
//"target": "ES6",

target은 컴파일될 자바스크립트의 버전을 명시 합니다. ES2015 버전이나 ES6 버전을 이용합니다.

ES2015 버전은 ES6 과 같습니다.

module

"module": "ESNext"

자바스크립트를 쓰는 환경이 “node.js”와 “웹 브라우저” 환경이 있습니다. 이에 사용하는 환경에 해당하는 모듈 시스템을 선택 할 수 있습니다.

node.js 환경에서는 CommonJs를 사용하고

웹브라우저에서는 에크마스크립트 모듈(ESM) 을 사용합니다

ESNext는 ESM의 가장 최신 방식의 ESM 입니다.

moduleResolution

"moduleResolution": "Node",

모듈을 불러 올 때 index는 생략이 가능하였습니다. 이는 “moduleResolution” 옵션을 “Node”로 선언하였기 때문입니다.

모듈 해석 방식은 "Node", "Classic” 2가지가 있습니다

esModuleInterop

"esModuleInterop": true,

CommonJS 모듈 시스템을 사용하는 라이브러리와 ES6 모듈 시스템을 사용하는 코드를 함께 사용할 때 사용합니다

esModuleInterop": false로 기본 선언 되어 있기에 CommonJS 방식으로 선언된 모듈을 가져올 수 없습니다.

true로 선언해야 CommonJS 방식으로 선언된 모듈 또한 사용 할수 있기에 이 옵션을 true로 선언 하는 것을 권장합니다.

또한 패키지를 설치할 때 모듈의 선언 방식이 esm형식과 CommonJS의 방식을 둘다 많이 사용하기 true로 선언하는 것이 좋습니다.

CommonJS 모듈, ES6 모듈 선언방식

CommonJS 모듈

//JavaScript

// CommonJS 모듈
const myModule = require('my-module');

// ES6 모듈 가져오기
import { someFunction } from 'another-module';

CommonJS 모듈에서 import 사용하여 모듈을 가져 옵니다

ES6 모듈

//JavaScript

// ES6 모듈
import { someFunction } from 'another-module';

// CommonJS 모듈 가져오기
const myModule = require('my-module');

ES6 모듈에서 require 사용하여 모듈을 가져 옵니다

isolatedModules

"isolatedModules": false,

기본 옵션은 false로 선언되어 있습니다.

옵션을 true로 설정하면 모든 파일을 모듈로 설정하여 파일마다 import 혹은 export 키워드를 필수로 넣어야 코드상 에러가 생기지 않습니다.

발생할 수 있는 모듈 구조 에러를 방지하기 위해 위와 같은 옵션을 사용할 수 있습니다

baseUrl

"baseUrl": "./",

프로젝트가 들어있는 기준 경로를 지정합니다

typeRoots

"typeRoots": ["./node_modules/@types"],

컴파일러가 참조할 타입 선언(d.ts)의 경로를 배열로 지정합니다

lib

"lib": ["ESNext", "DOM"],

TypeScript 컴파일러가 사용할 JavaScript 런타임 라이브러리를 지정하는 데 사용되는 옵션입니다.

다양한 JavaScript 환경 및 런타임 환경에서 TypeScript 코드를 실행하려면 lib 옵션을 적절하게 설정해야 합니다.

DOM, ESNext 모듈을 선택 할 수 있습니다.

strict

"strict": true,

strict 옵션은 기본적으로 false로 선언되어 있습니다.

우리는 엄격한 타입 문법을 사용하기 위하여 TypeScript를 사용하기 때문에 strict 옵션을 true로 지정하는 것이 좋습니다.

include

💡

프로젝트에 포함할 TypeScript 파일 패턴을 지정합니다. 이 패턴에 일치하는 파일만 컴파일됩니다.

"include": [ // 포함할 파일
    "src/**/*.ts"
],

src 폴더에 .ts 확장자 명을 가진 파일을 포함하겠습니다

exclude

💡

프로젝트에 포함 하지 않을 TypeScript 파일 패턴을 지정합니다. 이 패턴에 일치하는 파일은 컴파일에 포함하지 않습니다

"exclude": [ //제외할 파일
    "node_modules"
]

node_modules 폴더에 있는 파일은 포함하지 않겠습니다

마무리

위와 같은 옵션만 정의 해도 TypeScript를 사용하는데 큰 문제는 없습니다