[TypeScript] tsconfig.json 설정 하기

[TypeScript] tsconfig.json 설정 하기

tsconfig.json은 무엇이며 왜 사용하는가

tsconfig.json은 TypeScript를 JavaScript로 변환하기 위한 설정 파일이다. 이를 이해하기 위해서는 TypeScript의 기본적인 특징에 대해서 알아야 할 필요가 있다.

TypeScript의 기본적인 특징

정적 타입 언어(Statically Type Language)

TypeScript를 사용하는 가장 중요한 이유다. 프로그래밍 언어는 크게 정적 타입 언어(Statically Type Language)와 동적 타입 언어(Dynamically Type Language)로 나뉜다.

정적 타입 언어의 경우 자료형을 컴파일 단계에서 변수의 타입이 정의되는 언어를 의미한다. 이는 결과적으로 프로그래머가 수동으로 타입을 정의해야 하며, 만약 타입이 올바르지 못할 경우 컴파일 단계에서 컴파일 에러가 발생한다. 주로 C , C++, Java, TypeScript 등이 이에 해당된다.

동적 타입 언어의 경우 자료형을 런타임 단계에서 변수의 타입이 정의되는 언어를 의미한다. 이는 프로그래머가 수동으로 자료형을 지정해주지 않아도 되지만, 문제는 타입 검증이 되지 않은 상태로 프로그래밍이 실행되었을 때, 오류를 실행 후에나 알 수 있다는 단점이 있다. 이러한 단점이 가장 두드러지는 언어가 JavaScript이다.

예를 들어서 string만 받으려는 변수에 숫자가 들어가도 JavaScript는 실제로 실행 중에 저런 상황이 발생할 때 까지 아무런 오류도 잡아내지 못한다.

JS의 Superset

TypeScript는 JS의 Superset이다. 이는 즉 JS가 가지고 있는 기본 문법에 타입 및 타입스크립트에서 지원하는 문법을 추가하는 것이다. 이 때문에 우리는 .ts 파일을 .js로 컴파일해서 변환할 수 있다. 이 때, .ts를 .js로 어떻게 컴파일 할 것인지 정해 놓는 파일이 바로 tsconfig.json이다.

이 외에도 상속, 클래스, 인터페이스 등의 객체 지향 프로그래밍 문법을 TypeScript에서는 사용할 수 있는 등의 몇 가지의 특징이 있지만 tsconfig.json을 사용하는 이유와는 거리가 멀기 때문에 생략하도록 하겠다.

tsc

tsc 명령어는 tsconfig.json 설정을 토대로 .ts 파일을 .js파일로 바꿔주는 명령어 역할을 한다.

$tsc index.ts

위와 같은 명령어를 작성하면 index.ts를 index.js로 변환된다.

tsconfig.json 인식 범위

디렉토리에 tsconfig.json 파일이 존재한다면 그 디렉토리가 TypeScript 프로젝트의 루트 디렉토리가 된다. 대상 파일 지정 없이 tsc 명령어를 입력하면 루트 디렉토리에 있는 tsconfig.json을 기준으로 TypeScript 파일을 컴파일 합니다.

tsconfig.json options

JS 파일로 컴파일 할 TS 파일 설정하기

컴파일 할 TS 파일을 설정하는 방법은 두 가지가 있다

*files 사용
*

files 속성을 사용할 경우, files로 지정한 파일들이 컴파일 된다.

{
    "compilerOptions"{
    ...
    },
    "files" : [
        "index.ts",
        "type.ts",
        "app.ts",
    ]
}

include , exclude 사용

include를 사용해서 컴파일 할 폴더를 지정할 수 있다. 아래의 코드의 경우 src하위의 모든 폴더를 와일드 카드 패턴으로 나열 했다.

exclude를 사용하면 컴파일 하지 않을 폴더를 제외 할 수 있다.

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

TS compile option 설정하기

compilerOptions 속성을 사용하면 컴파일 옵션을 설정할 수 있다. 만약 tsconfig.json파일에 이를 설정하지 않으면 기본적 세팅으로 컴파일 된다. 모든 속성을 다 다룰 수는 없으므로 주로 자주 사용하는 설정 위주로 정리했다.

{
    "compilerOptions"{
        "target": "es5",
        "allowJs" : true,
        "sourceMap" : true,
    },
}

target

target 속성은 TS가 컴파일 되어서 JS로 변환될 때 변환된 JS 버전을 정한다.

allowJs

allowJs는 .ts 파일에서 .js파일도 import 할 수 있게 설정해주는 옵션이다. default값은 false지만 ture로 설정하면 .ts파일에서도 .js파일을 import해서 사용할 수 있다.

sourceMap

sourceMap은 sourcemap 파일 생성 유무를 결정한다. sourcemap 파일은 debugger혹은 다른 툴이 TS 소스 코드를 볼 수 있도록 만드는 파일이다. default값은 false이며 주로 디버깅이 필요한 개발 환경에서 true로 설정한다.

strict

Type 검사의 정도를 표현하는 옵션이라고 생각하면 된다. 8가지의 옵션이 있지만 이에 대한 내용은 추후에 다루도록 하겠다.