1-1. TypeScript란

• TS는 MS가 개발하여 2012년 10월 공개되었다.

• TS는 JS의 superset. 즉 JS의 확장판이고, JS를 감싸고 있다고 볼 수 있다.

  • JS는 dynamically typed다. 즉 프로그램이 동작할때 실시간으로 타입이 결정되기 때문에, runtime errors가 발생할 수 있다.
  • 반면 TS는 statically typed로, 컴파일 시 에러를 잡아낼 수 있다. (compile errors)

  

• JS도 엄밀히 말하면 객체지향 언어로, Prototype을 바탕으로 객체지향을 구현할 수 있고, constructor functions를 활용해서 클래스를 바탕으로 object를 만들 수 있다. 하지만 이것들로만은 완전한 객체지향의 핵심 기능들을 활용할 수 없다.

• TS는 최종적으로 컴파일러에 의해(자체 컴파일러 / 바벨 등을 사용한다) JS로 transcompile되어 사용된다.

  • 따라서 TS는 Client, Server가리지 않고 JS가 사용되는 어느 곳이라도 대체되어 사용 가능하다. JS 런타임 환경이 존재하는 어떤 곳에서던지 활용될 수 있다.
  • 브라우저 호환성 등을 걱정할 필요가 없다.
  • 당연히 JS와 TS를 섞어서 사용하는것도. 가능하다. 필요하다면. (기존 JS프로젝트에 TS파일을 추가한다던가)

• TS가 JS의 superset이긴 하지만, JS를 사용하는 방식 고대로 TS를 사용하는 것은 바람직하지 않다. TS를 제대로 사용하려면 TS만의 사용 방법을 알아야 한다.

  • 나쁜예
    • 절대 사용하면 안되는 var를 사용한다던지,
    • 스파게티처럼 뒤죽박죽 엮인 절차형 프로그래밍 방식으로 코드를 작성한다던지
    • 여기저기 interface만 이용해서 type을 정의한다던지

1-2. Why TS?

TS is statically typed, unlike JS, which is dynamically typed

• JS는 실행시 타입이 결정되기 때문에 조금 위험한 언어라고 할 수 있다.
• TS를 사용할 경우 runtime이 아닌 compile시 에러를 잡아낼 수 있다.

TS의 장점

1. TS를 사용하면 가독성Readability을 개선할 수 있다. 특정 변수가 어떤 타입의 값을 가지고 있는지 등을 바로바로 알 수 있기 때문이다.
2. 동적 타이핑의 경우 실행중에 오류가 발생할 수 있기 때문에, 실무에서, 즉 실제 프로덕트 개발 시 위험 부담이 있다. TS를 사용하면 이러한 문제를 해결할 수 있다.
   • 예를들면 개발 시에는 문제점을 발견하지 못하고 배포했는데, 유저가 직접 실행할때 에러가 발생하거나. 앱이 죽거나 하는 버그가 발생할 수 있다.
   • 정적 타이핑이 되는 언어를 사용하면 컴파일 시에 오류를 잡아내기 때문에 개발 단계에서 이런 문제 상황을 예방할 수 있게 된다.
     • 즉 더 안정적으로 개발이 가능하다.
     • 개발자 입장에서도 불안요소를 제거하는 것이기 때문에 더 안심하고 자신감 있게 개발할 수 있다.
3. OOP를 잘 지원한다.
   1. class, generics, types, interface 등의 기능들을 포함하기 때문이다.
4. 통계적으로 많이 쓴다. 당연히 배우면 취업에도 유리하고. 범용성이 좋다.

1-3. Getting Started (installing TS)

• Install TS
  • npm을 사용해서 설치해야 하기 때문에 node가 깔려있어야 한다.(npm은 node를 설치하면 자동으로 설치되기 때문)
    • 터미널에 node -v 를 입력하여 노드가 설치되어 있는지 확인해 보자. 설치되어 있지 않다면 nodejs.org에 가서 설치하자.
    • 터미널에 npm -v 를 입력하여 npm이 설치되어 있는지 확인해 보자.
  • TS 사이트에 가보면 어떻게 설치해야 하는지 나와 있다. npm으로 설치하려면 두가지 방법이 있다.
    • 프로젝트에 설치하기 ⇒ npm install typescript --save-dev
    • 글로벌로 설치하기 ⇒ npm install -g typescript
  • 잘 설치 되었는지 확인해보기
    • 터미널에 tsc -v 를 입력

1-4. TS Playground

TS Playground - An online editor for exploring TypeScript and JavaScript