[TS] TypeScript Install & Setting

본 글은 노마드코더의 TypeScript로 블록체인 만들기 강의를 보고 작성하는 글입니다.

 

 

사실 실무에서 일하시는 분이 TypeScript를 빠르게 배워 적용하기에 적절한 강의는 아니라고 하셨지만

Interface 같은 내가 스쳐가며 보여 이게 뭐지? 했던 개념을 소개해주는 것이 들어볼만하고 생각했고,

강의도 1시간이라 블록체인 만드는 부분 전까지만 간단하게 들으면 괜찮을 것 같아서 수강 결정!

 

JS도 못하는데 TS를 듣는게 꺼려졌지만 프로젝트에서 필요하다고 해서 강제로 배워야한다....

백엔드와 데이터를 주고받는 과정에서 타입이 정해지기 때문에 결국 TS를 써야한다고 하시더라........

 

TS는 왜 등장했는가?

 

바ㅏㅏ는 바나나

JS에는 엄격한 규칙이 없고 이는 개발자가 개발하기 쉽고, 수정하기 쉽도록 만들었다.

하지만 이러한 JS의 특성은 팀프로젝트나 버그를 최소화하고 싶을 때 단점이 된다.

그래서 JS의 예측 불가능한 점을 개선하고자 타입을 도입해서 만든 JS의 Super Set이 TS이다.

 

TS 설치

 

yarn add typescript

 

tsconfig.json

 

TypeScript 설정 파일. TypeScript를 JavaScript로 변환 시 설정을 정해주는 파일이다.

 

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES2015",              //어떤 버전의 JS로 컴파일 되고싶은지
    "sourceMap": true,               //sourcemap 처리
    "outDir": "dist"                 //컴파일된 js 파일을 어느 폴더에 위치할지
  },
  "include": ["src/**/*"],           //ts 컴파일 과정에 포함할 파일, 여기서는 src 폴더 내의 모든 파일
  "exclude": ["node_modules"]        //ts 컴파일 과정에 제외할 파일
}

 

tsc

 

tsc

yarn tsc

 

TypeScript를 컴파일하는 명령어이다. 

TypeScript를 global로 설치했다면 tsc만 입력해도 되지만 아니라면 yarn tsc로 입력해야한다.

이 명령어를 치면 include된 ts 파일을 js로 컴파일하여 js파일을 생성한다.

 

편의를 위해 package.json에 몇몇 설정을 추가하려고한다.

 

  "scripts": {
    "start": "node index.js",
    "prestart": "yarn tsc"
  },

 

yarn start를 입력하면 prestart로 ts파일의 컴파일을 먼저 하고, node로 index.js 파일을 실행해주도록 하였다.

 

tsc-watch

 

tsc-watch는 ts코드가 바뀔 때마다 자동으로 컴파일해서 js파일을 실행해준다.

 

yarn add tsc-watch

 

package.json 파일도 다음과 같이 바꿔준다.

 

  "scripts": {
    "start": "tsc-watch --onSuccess \" node dist/index.js\" "
  },