TypeScript

JavaScript에 Type을 추가한 확장 버전의 컴파일언어(Compile Language)

TypeScript란?

TypeScript는 컴파일(Compile)언어이다. 그럼 컴파일은 무엇인가...
컴파일은 런타임, 즉 실제 동작하는 실행환경에서 환경이 이해할 수 있는 코드로 변경해 주는 것을 의미한다.
다른 전통적인 컴파일언어와 다른 점이 있어서 Transpile라고도 불린다.

반대말로는 인터프리터가 있다. 인터프리터는 코드를 바로 실행하는 언어이다.
즉 TypeScript는 컴파일러(Compiler)를 통해 JavaScript로 변환하여 동작을 하게 된다.
이렇게 컴파일과정을 지나면 JavaScript에서는 알 수 없었던 오류를 잡을 수 있고, TypeScript의 장점인 Type을 지정해 주어 사용자가 올바른 동작을 할 수 있도록 더 도움을 준다.

TypeScript 시작하기

우선 설치해야 할 것들이 있다.

• NodeJS 다운로드

  https://nodejs.org/ko/

• Browser
  많은 브라우저들이 있지만 우리는 Chrome을 사용할 것이다.

  https://www.google.com/chrome/?brand=BNSD&gclid=CjwKCAjwuvmHBhAxEiwAWAYj-MIr2qQqcRGHbLroIDG0xHmWabQQBRnlQYO8o4AbtsOw_FRup5DE9RoClB0QAvD_BwE&gclsrc=aw.ds

• TypeScript Compiler => node에서 다운
  컴파일러의 다운로드는 2가지 버전이 있다.

  1. 전역으로 설치하여 어느 폴더&파일에서 사용하는 방법

  2. 내가 작업할 프로젝트에서만 사용하는 방법

     우리는 2번째 방법을 사용할 것이다.

    mkdir type-test
    # 폴더 생성

    cd type-test
    # 생성한 폴더로 이동

    npm init -y
    # node 프로젝트로 설정

    npm i typesciprt -D
    # typesciprt compiler를 개발전용으로 다운
    # 실제로 브라우저에서 동작할 때는 typesciprt compiler가 필요 없기 때문에 개발전용으로 다운

TypeScript 사용하기

ts파일 생성

폴더안에 index.ts를 만들어서 내용을 입력해준다.

// index.ts

console.log('hello typesciprt');	

index.ts파일을 컴파일러에 돌리기

tsc index.ts
# index.ts를 컴파일러에 돌리기

ls
# 해당 폴더의 파일들 확인

목록을 보면 index.js가 생성된 것을 알 수 있고, 내용을 들여다보면 index.ts랑 똑같다.
즉, index.ts의 컴파일된 파일이 index.js이다.

그럼 파일 하나가 아닌 프로젝트 폴더 전체를 컴파일러에 돌려보자

type-test 폴더 전체를 컴파일러에 돌리기

tsc --init
# 컴파일러 설정 파일을 생성

tsc
# 현대 폴더를 전체 컴파일러에 돌리기

그러면 똑같이 index.ts로 된 파일들이 컴파일되어 index.js이 생긴 것을 알 수 있다.

이렇게 매번 컴파일 명령어를 입력해 주기 귀찮기 때문에 nodemon과 비슷하게 변경이 일어나면 바로 컴파일 해주는 명령어가 있다.

변경사항 확인 시 자동 컴파일

tsc -w
# w플레그는 watch로 계속 관찰하고 있는 플레그이다.

이렇게 명령어를 띄어놓으면 index.ts에 변경사항이 있을 시 자동으로 컴파일러에 돌려준다.