TIL) 스파르타 개발일지 23-01-16

TypeScript 입문

 

타입스크립트란?

 

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

 

자바스크립트의 확장된 언어라고 볼 수 있습니다.

 

TS는 JS와 달리 브라우저에서 실행하려면, 파일을 한번 변환해주어야 한다.

 

이 과정을 complile 이라한다.

 

WHY ??

 

왜 타입스크립트를 써야만 하는가...

 

1. 에러의 사전 방지

예시)

// math.js
function sum(a, b) {
  return a + b;
}

// math.ts
function sum(a: number, b: number) {
  return a + b;
}

하나는 js 다른 하나는 ts로 작성된 두숫자의 합을 구하는 코드이다.

 

이 상황에서 sum을 사용하여 두 숫자 10, 20을 더한다면 어떻게 될까? 값은 30이 나오죠?

sum(10, 20); //30

근데 아래와 같이 함수를 호출한다면 ?

sum("10", "20") //1020

문자열 끼리의 합이기 때문에 10과 20을 붙인 "1020" 이 출력된다.

 

이 처럼 의도하지 않은 코드의 동작을 예방 할 수 있어 쓴다.

 

 

2. 코드 가이드 및 자동완성 기능 (생산성 증대)

 

예시)

function sum(a, b) {
  return a + b;
}
var total = sum(10, 20);
total.toLocaleString();

위 코드는 위에서 얘기했던 sum() 함수를 통해 수의 합을 구한 후

 

toLocaleString() (특정 언어의 표현 방식에 맞게 숫자를 표기하는 API)를 적용한 코드이다.

 

위와 같이 코드를 작성 시 total이라는 변수의 타입이 코드를 작성하는 시점에 number라는 것을 JS는 인지하지 못하고 있다.

 

저런 경우 일일이 입력해줘야하기 때문에 오탈자가 발생 시 오류가 날 수 있다.

 

하지만 TS의 경우 미리보기 메뉴가 뜨기 때문에 신속하며, 오류가 날 이유가 없기 때문.

 

기억 상 아무리 영타가 빠르고 정확하다 한들... 복붙의 벽을 넘을 수 없었다...