바닐라 TypeScript 시작하기 - 프로젝트 환경설정

본 글은 alligator 사의 “Setting Up a New TypeScript Project” 글을 번역한 것입니다.
Setting Up a New TypeScript Project
It’s easy to work with TypeScript when using a starter project or a tool like the Angular CLI, but what about a simple TypeScript project that would otherwise be just a vanilla JavaScript project?

원 저작자의 MIT 저작권을 따릅니다

TypeScript를 사용할 때, starter project 또는 Angular CLI 등으로 프로젝트를 시작하는 것은 매우 쉽습니다. 하지만 바닐라 Javascript project를 시작해야 할 때는 어떻게 할까요? 지금부터 하나씩 보도록 합시다.

Dependencies

먼저 TypeScript를 설치해보도록 하겠습니다. 글로벌하게 설치할 수도 있고, 로컬 프로젝트에만 설치할 수도 있습니다.

글로벌 설치:

$ npm i typescript -g

# or, using Yarn:
$ yarn global add typescript

로컬 설치:

$ npm i typescript --save-dev

# or, using Yarn:
$ yarn add typescript --dev

Setup

TypeScript에는 tsc와 tsserver라는 두 가지 바이너리가 있습니다. tsc는 TypeScript 컴파일러로 다양한 옵션과 함께 command line interface를 갖고 있습니다. TypeScript 프로젝트를 시작하기 위해, 간단히 --init flag를 사용하십시오:

$ tsc --init

만약 TypeScript가 로컬에 설치되어 있을 경우, 로컬의 node_modules 폴더에서 tsc를 호출해야 합니다:

$ ./node_modules/.bin/tsc --init

로컬 tsc를 간단히 사용하고 싶은 경우에는 npx를 사용하십시오:

$ npx tsc --init

--init 플래그와 함께 tsc를 실행한 후, tsconfig.json 파일이 몇 가지 기본 값들과 함께 당신의 프로젝트 폴더에 생겼을 겁니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true
  }
}

이제 기본 설정에서 몇 가지 항목을 추가해보도록 하겠습니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "outDir": "dist",
    "sourceMap": true
  }
}

이제 TypeScript 컴파일 결과의 JavaScript 파일들이 dist폴더에 생길 것이고, sourcemap도 생길 것입니다.

Compiling

tsconfig.json이 잘 생성되었으면 이제 TypeScript로 코딩을 해봅시다.

src폴더 안에 index.ts파일을 다음과 같이 만들어 줍니다:

const world = 'Hi';

export function hello(word: string = world): string {
  return `Hello ${world}! `;
}

이제 tsc 명령어를 이용해 컴파일 할 수 있습니다.

$ tsc

# or, for local tsc:
$ npx tsc

이제 JavaScript 파일과 sourcemap 파일이 생성되었습니다. 다음은 컴파일된 JavaScript 파일입니다.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var world = 'Hi';
function hello(word) {
    if (word === void 0) { word = world; }
    return "Hello " + world + "!";
}
exports.hello = hello;
//# sourceMappingURL=index.js.map

Watch mode

매번 변화가 있을 때마다 TypeScript 컴파일을 해주는 것 대신에, watch mode로 컴파일을 시작하면 자동으로 TypeScript 파일에 변화가 있을 때마다 다시 컴파일을 해줍니다.

$ tsc -w

# or, for local tsc:
$ npx tsc -w

tslint

린터(linter)를 사용하는 것은 코딩을 하는데 있어 불일치, 구문 오류 및 누락에 대해 빠르게 알 수 있으므로 필수적입니다. TypeScript에서 린터는 tslint를 사용합니다.

프로젝트에서 tslint를 사용해봅시다. 다음과 같이 npm을 사용하여 설치할 수 있습니다:

# for installing globally:
$ npm i tslint --g

# for installing locally:
$ npm i tslint --save-dev

혹은 Yarn을 사용해도 됩니다:

# global:
$ yarn global add tslint

# or local:
$ yarn add tslint --dev

tslint가 설치되었다면, --init 플래그를 통해 시작할 수 있습니다.

# if using global tslint:
$ tslint --init

# if using local tslint:
$ npx tslint --init

이는 다음과 같이 프로젝트에 tslint.json 기본 설정 파일을 생성합니다:

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended"
  ],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

이제 tslint 확장 프로그램을 설치하여 코드 에디터에서 문법 오류가 났을 때 바로바로 확인을 하고 싶으실 겁니다. 이 작업을 마친 후에는 에디터를 재시작해야 할 수도 있습니다.

위의 간단한 예시 코드를 사용한다면, tslint는 우리의 따옴표가 큰따옴표(")를 사용해야 한다는 것을 말해주거나 우리의 파일이 새로운 라인으로 끝나야 한다는 것을 알려줄 것입니다. 만약에 작은 따옴표를 사용하고싶고, 파일 마지막에 추가적인 문장을 두고 싶지 않다면, 다음과 같이 설정을 변경해주면 됩니다:

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "eofline": false,
        "quotemark": [
            true,
            "single"
        ]
    },
    "rulesDirectory": []
}

Airbnb style-guide for tslint

규칙을 일일이 추가해주는 작업은 매우 번거롭습니다. 종종 쉬운 방법으로는 잘 알려져있고 대다수가 받아들이는 기본 설정을 사용하는 것입니다. Airbnb의 설정은 그러한 설정 중 하나입니다.

다음과 같이 설치를 먼저 하도록 하겠습니다:

$ npm install tslint-config-airbnb

# or, using Yarn:
$ yarn add tslint-config-airbnb

이제 tslint 설정을 다음과 같이 바꾸어 Aribnb의 설정 파일을 사용해봅시다:

{
    "defaultSeverity": "error",
    "extends": "tslint-config-airbnb",
    "jsRules": {},
    "rules": {
        "eofline": false
    },
    "rulesDirectory": []
}

더 쉽게 갑시다: gts를 사용해보세요

이제 앞서 봤던 것들이 어떻게 맞춰지는지 알게 되었습니다. 이제는 linting과 tsconfig.json 파일들을 더 쉽게 설정할 수 있는 지름길을 알려드리도록 하겠습니다. Google TypeScript Style(gts)는 새로운 TypeScript 프로젝트를 보다 쉽게 만들어주고 설득력 있는 기본 설정들을 갖고 있습니다.

새로운 프로젝트를 만들기 위해서는 단지 새로운 폴더에 다음 명령어를 입력해주면 됩니다:

$ npx gts init

이 명령어는 tsconfig.json과 linting 설정을 하는데 필요한 모든 것을 만들어 줍니다. 심지어 package.json 파일까지 생성해 줍니다.

이제 dependencies를 설치해줍시다:

$ npm install

# or, using Yarn:
$ yarn

또한 gts는 간편한 npm script를 package.json에 추가해줍니다. 예를 들어, 프로젝트를 컴파일 하기 위해서는 npm run compile 명령어를 사용하거나, linting 에러를 확인하기 위해서는 npm run check 명령어를 사용하면 됩니다.

에디터에서 tslint를 사용하기 위해서는 tslint.json에 직접 추가해 gts의 tslint 설정을 확장해주어야 합니다.

{
  "defaultSeverity": "error",
  "extends": [
    "./node_modules/gts/tslint.json"
  ],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}