TypeScript는 뭘까..?

TypeScript란

타입스크립트는 자바스크립트에 타입을 부여한 언어다.
쉽게말하면 자바스크립트 확장판이다. TS는 JS와 달리 브라우저에서 실행하려면 파일을 한번 변환해야한다. 이를 컴파일이라고 부른다

왜 TypeScript를 써야할까

사실 나같은 개초보에겐 아직까지 JS도 어렵다.. ㅠ 단지 최신기술이라서? 요즘 시장에서 많이쓰여서..? 라고 생각할수도있지만 TS는 아래 두가지의 장점이있다.

• 에러의 사전방지
• 코드 가이드 및 자동 완성

에러의 사전방지

Ts는 에러를 사전에 미리 예방 가능하다. 아래 Js vs Ts 코드를 보고 이해해보자

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

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

두 코드 모두 두 숫자의 합을 구하는 함수 코드이다.
한번사용해보자

#JavaScript Code
sum(10,20); // 30
sum("10","20"); // 1020

#TypeScript Code
sum(10,20); // 30
sum("10","20"); // Error: "10"은 number에 할당될 수 없습니다.

vsc에서는 아래와 같이 보일것이다.

코드 자동 완성과 가이드

타입스크립의 또 다른 장점은 코드작성시 개발툴의 기능을 최대로 활용할수있단 점인데 VSC랑 매우 찰떡이다.

개발자 관점에서 JS에 Type이 더해졌을때 어떠한 장점이 있는지 살펴보기 위해 아래 JS 코드를 확인해보자

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

var total = sum(10,20);
total.toLocaleString();

위의 코드는 앞에 봤던 sum() 함수를 이용하여 두 숫자의 합을 구한 다음 toLocaleString() 를 적용한 코드다. 여기서 중요한건 toLocaleString() 이게 뭔지가 중요한게 아니라 total 이라는 변수 타입이 코드를 작성하는 시점에 number라는것을 JS가 인지하지 못한다는 점이다

쉽게말하면 킹갓개발자가 사전에 미리 인지를하고 타입을 number라고 가정한 상태에서 toLoacaleString()을 사용하는것이 된다.

바로 위의 사진을 보면 오타가 나서 toLoaclString 메서드를 사용했다. 하지만 우리 JS는 그런거 몰랑 ㅠ
브라우저에서 실행했을때만 오류를 확인할수있을것임

하지만 만약 TS로 작성했다면??

응 그런 메서드 없어! 이거써! 이렇게 total의 타입이 지정되어있기 때문에 VSC에서 해당 타입에 대한 API를 미리보기로 띄워주기 때문에 빠르게 작성이 가능한것이다