TypeScript 프로젝트

TypeScript 프로젝트는 (임의의) 루트 폴더와 그 서브디렉토리에 있는 모든 .ts 파일들을 포함하는 것으로, 루프 폴더에 tsconfig.json 이라는 config 파일을 갖는다. TypeScript 프로젝트는 TypeScript 파일(*.ts)을 개별적으로 컴파일하는 대신, 프로젝트 안에 있는 모든 TypeScript 파일들을 한꺼번에 컴파일할 수 있게 한다.

특정 디렉토리에 있는 모든 TypeScript 파일들을 관리하기 위해 TypeScript 프로젝트를 만들어 사용하는데, 현재 작업하는 디렉토리를 TypeScript 프로젝트로 만들기 위해서는 tsconfig.json 파일을 수작업으로 생성하거나 혹은 보다 손쉽게 tsc --init 명령을 실행하면 된다.

    # tsconfig.json 파일 생성
    C:\myapp> tsc --init

tsconfig.json 파일에는 TypeScript 컴파일러 옵션들이 들어가 있는데, 만약 비어 있으면 TypeScript 컴파일러의 디폴트 옵션들을 사용한다. tsconfig.json을 루트 폴더에 넣고, 프로젝트 전체를 컴파일하기 위해서는 별도의 옵션없이 "tsc" 명령을 사용한다.

    # TypeScript 프로젝트 전체 컴파일
    C:\myapp> tsc

예를 들어, 아래와 같이 2개의 TypeScript 파일(ex1.ts, ex2.ts)이 임의의 프로젝트 폴더에 있고, 해당 프로젝트 루트 폴더 안에 tsconfig.json 파일이 있다고 가정하자. tsconfig.json 에는 여러 컴파일러 옵션을 지정할 수 있지만, 현재는 비어 있다고 가정한다. (즉, tsconfig.json은 JSON 파일이므로 "{ }" 이 있다고 가정) 이 경우 아래와 같이 tsc 를 실행하면 해당 폴더의 *.ts 파일들이 컴파일되어 *.js 파일들(ex1.js, ex2.js)이 생성된다.

만약 tsconfig.json 파일이 루트폴더에 있지 않고 다른 폴더에 위치한다면, "tsc --project" 옵션을 사용하여 해당 경로를 지정할 수 있다.

    C:\myapp> tsc --project c:\src\tsconfig.json

한가지 주의할 점은 tsconfig.json 가 이처럼 다른 폴더(C:\src)에 있을 때, C:\src 안에 적어도 하나의 .ts 파일이 있어야 한다는 것이다. 만약 없으면 빈 .ts 파일을 하나 만들어 놓아야 한다. 그렇지 않으면, error TS18003: No inputs were found in config file 'c:/src/tsconfig.json' 와 같은 에러를 발생시킬 수 있다.

tsconfig.json 옵션들

TypeScript 프로젝트를 컴파일할 때 사용하는 tsconfig.json 파일에는 tsc 컴파일러 옵션들을 지정할 수 있다. tsc 컴파일러 옵션은 -- 혹은 - 으로 표시되는데, -- 옵션은 긴 명령옵션을 쓸 때 사용하고, - 옵션은 -- 옵션의 단축형으로 짧게 쓰기 위해 사용된다. 예를 들어, tsc --module 옵션은 긴 명령옵션을 사용한 것이고, 이를 줄여 tsc -m 과 같이 사용할 수 있다. 이러한 tsc 명령옵션들을 tsconfig.json 파일 안의 "compilerOptions"에서 그대로 사용할 수 있다. 아래는 3개의 TypeScript 컴파일러 옵션을 사용한 tsconfig.json 파일의 예이다.

    {
        "compilerOptions": {
            "target": "ES6",
            "removeComments": true,
            "pretty": true
        }
    }

tsconfig.json 파일에서 특정 *.ts 파일들만 컴파일하도록 지정할 수 있는데, 이는 아래와 같이 files 값을 지정하면 된다.

   {
       "compilerOptions": {
           "target": "ES6",
        },
        "files": [
           "ex1.ts",
           "ex2.ts",
           "ex3.ts"
        ]
   }

tsconfig.json 파일에 또 다른 옵션으로 include, exclude 옵션이 있는데, include는 컴파일에 포함하는 파일들을 나타내고, exclude는 include 대상 중 제외시켜야 하는 파일들을 나타낸다. 아래 예는 src 서브디렉토리 안에 있는 모든 파일들을 컴파일하는데, 단 test*.ts 파일들을 컴파일에서 제외한다.

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

TypeScript 프로젝트 구조

아래는 TypeScript 프로젝트를 구성하는 방법을 예시한 것으로, TypeScript 소스코드를 ./src 폴더에 작성하고, (tsconfig.json 을 수정하여) JavaScript 출력 파일을 ./dist 폴더에 넣도록 한 후, TypeScript 프로젝트 전체를 컴파일(tsc)한 것이다. 일반적으로 큰 프로젝트의 경우 JavaScript 출력 파일을 별도의 output 폴더에 넣는 것이 편리하다.