TypeScript 왜 쓰나요?

📖 개념

타입스크립트란?

타입스크립트는 자바스크립트에 타입을 부여한 언어입니다.

(편의성을 위해 TS: TypeScript , JS: JavaScript로 명시하겠습니다.)

TS는 JS와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 합니다. 이 변환 과정을 컴파일(complile) 이라고 합니다.

왜 타입스크립트를 써야할까요?

첫번째 이유. 에러의 사전 방지

아래 2개의 코드를 비교하여 어떻게 에러를 사전에 방지할 수 있는지 살펴보겠습니다.

function sum(a, b) {
  return a + b;
}

function sum(a: number, b: number):number {
  return a + b;
}

---

위 2개의 JS, TS 함수가 있습니다. 구현 내용에 있어서는 차이가 없지만 가장 큰 차이점이라고 할 수 있는건 바로 type의 선언 유무임을 알 수 있습니다.

이때 아래와 같은 코드를 작성 후, 실행을 하면 JS는 문제없이 돌아가지만

sum(10,'20')

하지만 TS에서는 ‘20’ 이 number가 아닌 string 타입으로 들어왔기 때문에 에러임을 잡아냅니다.

이와 같이 TS는 과거 JS에서는 용인되던 오류 코드를 type으로 선언하여 잡아낼 수 있게 되었습니다.

두번째 이유. 개발 생산성의 향상 (코드 자동완성 기능)

출처: https://joshua1988.github.io/ts/why-ts.html#왜-타입스크립트를-써야할까요

JS로 선언한 total 이라는 변수가 number임을 인식하지 못합니다. 그렇기 때문에 number와 관련한 메소드를 선언하고 싶을때 자동완성 기능이 지원되지 않기 때문에 개발자가 직접 해당 관련한 메소드를 구글링 하지 않는 이상 에러를 발생 시킬 확률이 높은 개발 작업입니다.

출처 : https://joshua1988.github.io/ts/why-ts.html#왜-타입스크립트를-써야할까요

하지만 TS로 구현을 하면, total 변수에 mouseover 시, number 타입임을 알 수 있습니다.

그리고 VSC IDE 자체에서도 total 이 number임을 알기 때문에 number와 관련한 메소드를 자동으로 인식하여 지원하게 됩니다. 이렇게 되면 메소드 선언 오탈자로 인한 오류를 확연히 줄일 수 있다는 장점을 지니고 있습니다.