트랜스파일링을 위한 typescript 개발환경 구축 방법

typescript

Typescript와 트랜스파일링

자바스크립트의 문제점을 보완하기 위해 typescript을 사용한다. 그러나, typescript으로 작성한 파일은 브라우저에서 동작하지 않는다. 따라서, typescript로 작성한 파일을 자바스크립트로 변환해야 하는데, 이를 트랜스파일링 또는 컴파일이라고 한다. 트랜스파일링을 하기 위해서는 typescript 컴파일러를 설치하여 사용하는 typescript 개발환경을 구축해야한다.




typescript 컴파일러 설치 방법

다음과 같이 typescript를 전역에 설치한다.

1
npm install -g typescript


설치가 완료되면, typescript의 버전 체크를 하여, typescript 컴파일러 설치가 제대로 되었는지 확인한다.

1
tsc -v




typescript 컴파일러로 트랜스파일링 하기

typescript로 작성된 파일(.ts)을 자바스크립트 파일로 트랜스파일링 하기 위해서는, 위에서 설치한 typescript 컴파일러(tsc)를 사용한다.


1개의 파일 트랜스파일링 하기

아래의 코드를 작성하고, 확장자를 .ts로 하는 typescript 파일로 만든다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Cafe {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  greeting() {
    return "Welcome to" + this.name;
  }
}

const cafe = new Cafe('Starbucks');
console.log(cafe.greeting());


위 typescript 파일을 트랜스파일링하여 자바스크립트로 만들기 위해서는 아래의 명령어를 작성하면 된다.

1
tsc cafe

tsc 다음에 위 파일(cafe.ts)의 이름(cafe)을 입력하면 된다.


그러면, 트랜스파일링이 되어, 또 하나의 자바스크립트 파일이 생성된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
"use strict";
exports.__esModule = true;
var Cafe = /** @class */ (function () {
    function Cafe(name) {
        this.name = name;
    }
    Cafe.prototype.greeting = function () {
        return "Welcome to" + this.name;
    };
    return Cafe;
}());
exports.Cafe = Cafe;
var cafe = new Cafe('Starbucks');
console.log(cafe.greeting());

그런데, 트랜스파일링된 자바스크립트 파일은 ES3 버전으로 생성되는데, 이는 트랜스파일링해서 생성되는 기본 버전이 ES3이기 때문이다.


target 컴파일 옵션을 사용해서 원하는 버전으로 트랜스파일링 하기

만약 원하는 버전으로 트랜스파일링 하고 싶다면, typescript 컴파일 옵션중 –target또는 -t를 사용하면 된다.

1
tsc cafe -t es6


ES6 버전은 아래와 같이 나온다.

1
2
3
4
5
6
7
8
9
10
class Cafe {
    constructor(name) {
        this.name = name;
    }
    greeting() {
        return "Welcome to" + this.name;
    }
}
const cafe = new Cafe('Starbucks');
console.log(cafe.greeting());

그러면, 처음에 생성된 ES3 버전의 자바스크립트 파일이 ES6 버전의 자바스크립트 파일로 코드의 내용이 변경된다.


2개의 파일 트랜스파일링 하기

2개의 typescript 파일을 작성하여, 트랜스파일링을 해보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// cafe.ts
export class Cafe {
  protected name: string;

  constructor(name: string) {
    this.name = name;
  }

  greeting() {
    return "Welcome to" + this.name;
  }
}

const cafe = new Cafe('Starbucks');
console.log(cafe.greeting());

1
2
3
4
5
6
7
8
9
10
11
12
// bakery.ts
import { Cafe } from './cafe';

class Bakery extends Cafe {
  bake(): string {
    return `${this.name} is baking bread. Wow!!`;
  }
}

const bakery = new Bakery('Starbucks');
console.log(bakery.greeting());
console.log(bakery.bake());


위 두개의 typescript 파일들을 트랜스파일링 하기 위한 명령어를 작성하면 된다.

1
tsc cafe bakery

그러면, 두개의 typescript 파일들이 두개의 자바스크립트 파일로 트랜스파일링 된다.


3개 이상의 파일 트랜스파일링 하기

3개 이상의 모든 typescript 파일들을 한번에 트랜스파일링 하기위해서는 와일드카드(*)를 사용해야 한다.

1
tsc *.ts


자동으로 트랜스파일링 하기

typescript 컴파일 옵션 중 —watch 또는 -w 를 사용하면, 파일의 내용이 변경되었을 때, 이를 감지하여 자동으로 그 파일이 트랜스파일링 된다.

1
tsc bakery —watch