🤔Why TypeScript ❓

회사들의 채용공고에 꼭 등장하고 많은 개발자들이 사용하고 있는 TypeScript..!!
JavaScript의 superset이라는데 어떤 차별점을 가지고 있기에 이렇게 핫한지 궁금증이 생겨서 포스팅합니다.

TypeScript 특징

• Microsoft에서 발표한 JavaScript기반 오픈소스
• JavaScript 정적 타이핑을 추가한 JavaScript의 Superset(상위확장)
• 컴파일 언어, 정적 타입 언어
• JavaScript가 동작하는 모든 곳( client-side || server-side )에서 사용가능합니다.
• 낮은 버전의 ECMA 수용

TypeScript가 핫(?)한 이유로는 크게 두가지가 있다.

• 1. Type
• 2. OOP(객체지향프로그래밍)

---

1. Type...

TypeScript = JavaScript + type

1-1. 타입 안정성 ↑, 속도 ↑

Compile time에 type을 결정하기 때문에 속도↑ , 타입에러로 인한 문제점을 초기에 발견할 수 있어 타입의 안정성↑

JavaScript 는 동적 타입 언어로 프로그램이 실행될 때 즉, Runtime때 타입이 결정 되고 때문에 런타임 에러 의 위험에 노출되어있다.때문에 개발 중 이슈를 잡아내지 못할 가능성으로 인해 사용자가 프로그램을 실행 도중에 변수에 예상치 못한 타입이 들어와 타입 에러 를 뿜는 경우가 생길 수 있습니다.

반면, TypeScript 는 JavaScript에 type을 더하여 위의 문제들을 해결하였다. 정적 타입 언어로 타입을 컴파일 시에 결정 할 수 있고, 개발 중에 컴파일 에러 를 통해 즉각적으로 type-checking errors 를 받아볼 수 있다.

이는, TypeScript 의 타입 기능을 이용해 구현하면 타입스크립트 컴파일러(TSC) 는 문제의 원인이 무엇인지 친절하게 알려주기 때문에 오류의 원인을 쉽게 알 수 있다. 덕분에 안정적이고 확장가능한 소프트웨어를 만들어 낼 수 있다.

💻 Transpile : TS ⇨ JS: (feat. tsc(ts compiler) & babel)

여기서 Transpile이란, 어떤 프로그래밍 언어로 작성된 소스코드를 또 다른 프로그래밍 언어로 된 소스코드로 바꿔주는 프로그램이다. 트랜스파일러는 텍스트로 된 소스코드를 바이너리 코드로 바꿔주는 Compile과 구분하기 위해 생긴 용어이다.

	Compile	Transpile
소스코드 ⇨	바이너리 코드	소스코드(다른 프로그래밍 언어)

TypeScript 코드는 tsc(타입스크립트 컴파일러)나 babel을 통해서 JavaScript코드로 변환된다. 덕분에 JS Runtime 환경이 존재하는 어떤 곳에서든 사용할 수 있다.

✅ TS는 JS Runtime 동작하는 곳에서 다 사용할 수는 있지만, 꼭 TransCompiler를 통해 JS로 변환해주어야한다.

1-2. 타입에 대한 예외처리 설정 불필요

1-1에서 본듯이 JavaScript는 Runtime때 타입이 결정 되고 때문에 런타임 에러 의 위험에 노출되어있다. 때문에 JS에서는 사용자의 input에 따라 예외처리를 해야하는 경우가 있다. 하지만 TS에서는 미리 타입을 지정하고, compile time에서 확인하므로 타입에 대한 예외처리를 하는 코드를 작성하지 않아도 된다.

1-3. 가독성 ↑

JavaScript 는 코드에서는 type이 명시되어 있지 않기 때문에 가독성이 떨어진다.
반면, TypeScript 는 객체의 형태를 명시, 변수의 type명시, 함수라면 인자와 리턴값의 명시를 통해서 더 나은 가독성을 보장받을 수 있다. 또 가독성을 통해 안정성 또한 확보할 수 있다.

✔️ 예시

  // JavaScript 
  function jsSum(num1, num2) {
    return num1 + num2;
  }
  // TypeScript ✨
  function sum(num1: number, num2: number): number {
    return num1 + num2;
  }

JS로 작성한 jsSum 이라는 함수는 num1,2이라는 숫자를 더하는 기능을 하면 좋겠지만, 아무 타입이나 다 들어갈 수 있기 때문에 Runtime Error나 함수의 매개변수에 string을 넣으면 문자열을 이어주는 기능을 해서 원래의 목적을 잃을 수 있다.

TS 코드는 정확히 어떤 기능을 하는지 어떤 값을 리턴하는지 명시해주어서 안정성 ↑ + 가독성 ↑

---

2. 강력한 OOP 지원

Object-Oriented Programming의 약자로 객체지향 프로그래밍을 뜻하고 컴퓨터 프로그래밍의 패러다임 중 하나이다. 객체 지향 프로그래밍은 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것이다. 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있다.

이와 같이 FP(함수형 프로그래밍)이 자주 언급되는데 후에 정리해볼 예정이다.

지금의 내가 객체지향 프로그래밍이라는 것에 대해서 완벽히 이해하고 이 글을 작성하지는 못하지만 TS를 통해 JS보다 더 나은 OOP를 할 수 있다는 것에 대해서 정리하려고 한다. 

간단하게 OOP에 대해서 정리해보자

OOP의 특징 4가지

• 모듈화 : 객체를 위주로 모듈성 있는 코드를 작성할 수 있다.
• 재사용성 : 모듈별로 원하는 것을 재사용할 수 있다.
• 확장성 : 객체 단위로 확장해나갈 수 있다.
• 유지보수성 : 위의 특징으로 기존 코드의 이슈해결 / 새로운 기능 추가를 쉽게 / 덕분에 협업 ↑

OOP에 따라 코딩했을때의 장점

• 생산성 ↑
• 코드 퀄리티 ↑
• 제품 개발 속도 ↑

물론 장점만 있는 것은 아니고 일부 문제로 인해 FP를 사용해야한다고 한다,
무튼! OOP에는 이런 장점들과 특징이 있고 JS에서도 어느정도 구현이 가능하지만, TS로 인해서 다른 Class를 베이스로 한 프로그래밍 언어처럼 사용할 수 있게 해준다. 뭐라 설명해야할지 잘 모르겠지만... 그냥 OOP에서 더 Cool한 OOP....;;;

강력한 OOP...

JS도 엄밀히 말하자면 "Prototype"을 베이스로 OOP를 구현할 수 있다고 한다.

contstructor function 을 이용하여 class 를 사용해서 Object를 만드는 것 처럼 간편하게 Object를 만들 수 있다고 한다.
하지만 이러한 방법으로 확실한(?) OOP를 하는 것은 어렵다고 한다.
또, ES6에서 "class"라는 것이 도입되었지만, 이것 또한 "prototype"을 베이스로 하고 있어서 할 수 있는 것이 많이 없다고 한다.

(OOP도 잘 모르는데 뭘 쓰고 있는건지...꼭 정리해야지..)

반면, TypeScript는 "class", "interface", "generic"등 을 활용하여 다른 Class를 베이스로하는 프로그래밍 언어처럼 강력한 OOP가 가능하다고 한다.

---

위의 가장 주요한 장점 외에도

• ES5 / ES6 / ES NEXT 지원 => 브라우저 호환성
• JS 프로젝트에 점진적으로 TS를 적용가능

등의 여러 장점들이 더 많다!

결론 ‼️

TypeScript는 쓰지 않을 이유가 없다!

참고자료 | TypeScript 공식문서
참고자료 | Junho's Dev Wiki
참고자료 | TypeScript 하기 전에 이정도는 알아야지!