TypeScript란?

TypeScript? 🤔

2012년 마이크로소프트가 발표한 타입스크립트(TypeScript)는 
자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어입니다.

타입스크립트의 특징

컴파일 언어, 정적 타입 언어

자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있습니다.

이에 반해 타입스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환됩니다.

코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있습니다.

하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있습니다.

 

자바스크립트 슈퍼셋(Superset)

타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어입니다. 따라서 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있습니다.

 

객체 지향 프로그래밍 지원

타입스크립트는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공합니다.

 

컴파일 단계에서의 에러 체크

높은 수준의 코드 탐색과 디버깅
타입스크립트는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거합니다. 또한 코드 자동완성이나 실행 전 피드백을 제공하여 작업과 동시에 디버깅이 가능해 생산성을 높일 수 있습니다. 실제로 한 연구에 따르면 모든 자바스크립트 버그의 15%가 사전에 타입스크립트로 감지할 수 있다고 합니다.

 

자바스크립트 호환

타입스크립트는 자바스크립트와 100% 호환됩니다. 따라서 프론트엔드 또는 백엔드 어디든 자바스크립트를 사용할 수 있는 곳이라면 타입스크립트도 쓸 수 있습니다. 타입스크립트는 앱과 웹을 구현하는 자바스크립트와 동일한 용도로 사용 가능하며 서버 단에서 개발이 이루어지는 복잡한 대형 프로젝트에서도 빛을 발합니다.

 

Why typescript?

• 코드의 버그 감소
• 런타임 에러 감소
• 생산성 향상

✔️ 실제로는 이해할 수 없지만, javascript에서는 당연하게 허용이 되는 예시

 

[Example 1]
Array + Boolean이 String이 되는 현상 (이를 개발자가 의도하고 했다면 인정, 하지만 그런 개발자가 있는가..?🤔)

  [1,2,3,4] + false
  -> '1,2,3,4false'

 

[Example 2]
해당 예제에서는 컴퓨터와 개발자가 소통하는 과정에서 컴퓨터는 a와 b가 정확히 어떤 것인지 모른다.
따라서 사용자가 어떻게 값을 보내도 컴퓨터는 이를 처리해줘야하는 상황이 생기다보니 인자를 1개만 보내도, 숫자가 아닌 문자를 보내도 허용해주고 있는 이상한 현상이 일어나고 있다.
하지만 NaN이라는 리턴을 받고 있고, 코드에 에러가 없는 채로 진행이 되기에 프로젝트가 커질수록 우리는 어디서 문제가 발생한지 알기 어려워진다.

  function divide(a, b) {
    return a / b;
  }

  divide("abc");
  -> NaN

 

[Example 3]
컴파일 단계에서 파악할 수 없고, 런타임 단계에서 에러가 나는 최악의 경우를 경험 할 수 있다.

  const obj = {
    name: "kw",
    sayHello: (name) => console.log(`hello ${name}`)
  };
  obj.sayHello(obj.name);
  -> hello kw

  obj.asyHello(obj.name);
  -> VM137:2 Uncaught TypeError: obj.asyHello is not a function
    at <anonymous>:2:7

👉 따라서 이런 행동이 이상하지 않냐고 개발자에게 javascript가 알려줄 필요가 있다.

 

 

[출처]
https://www.samsungsds.com/kr/insights/typescript.html

https://radixweb.com/blog/typescript-vs-javascript