참고(거의 배낀수준…) : https://poiemaweb.com/typescript-introduction

JS와는 달리 TS는 브라우저에서 바로 작동하는게 아니라 먼저 TS -> JS로 변환을 해줘야 한다. 이때 TS변환기 프로그램이 필요하다.

Node설치

이글을 참고한다

Typescript 컴파일러 설치

Node를 설치하면 npm도 같이 설치된다. 이 npm을 통해 Typescript 컴파일러를 설치하자.

npm install -g typescript

다 설치가 되었다면, tsc -v 로 버전을 확인해보자.

컴파일

typescript로 막 코딩한다음에 tsc myTest.ts요렇게 쳐주면 알아서 myTest.js파일로 컴파일해준다.

let a: number = 10
function hello(name:string):string {
    return `Hello ${name} ~~`
}
console.log(hello("YOON"))
tsc myTest.ts

결과물

var a = 10;
function hello(name) {
    return "Hello " + name + " ~~";
}
console.log(hello("YOON"));

이렇게 컴파일된 js는 ES3 로 변환이 되는데 옵션을 통해서 ES2015~ 등으로 변경이 가능하다.

tsc myTest.ts -target ES2017

옵션설정

컴파일할때 -target 같은 다양한 옵션들을 일일이 뒤에 붙여쓰는건 매우 번거롭다. 그렇기 때문에 옵션 파일을 하나 만들어서 컴파일러가 그 파일을 참고하도록 하자.

root@goorm:/workspace/Typescript# tsc --init
message TS6071: Successfully created a tsconfig.json file.

그러면 아래와 같은 다양한 옵션이 적혀있는 tsconfig.json 파일이 생성된다.

다만, tsc myTest.ts 이렇게 파일명을 구체적으로 적어주면 tsconfig.json파일이 반영되지 않기때문에 주의해줘야한다.

tsconfig.json을 반영시키려면, 그냥 tsc 만 떡–하니 써주면 되는데, 기본적으로는 현재 tsc명령어를 사용한 위치의 모든 ts파일들을 컴파일해버린다.

myTest.ts와 hahaha.ts가 각각 myTest.js, hahaha.js로 한번에 컴파일되었다

Watch Option

계속 tsc로 컴파일 하는것도 귀찮다면, watch option을 쓰자. 파일을 저장할때마다 알아서 컴파일 해준다.

tsc --watch
[90m8:02:07 ├F10: AM┤] File change detected. Starting incremental compilation...

[8:02:07 ├F10: AM┤] Found 0 errors. Watching for file changes.

Watch and Run

자동 컴파일도 해주고, 또 자동으로 바로 실행도 시켜주면 얼마나 좋을까?

그래서 검색해보니까, ts-node-dev라는 좋은 라이브러리가 있었다.

npm install -g ts-node-dev

로 설치해주고