Typescript vs Javascript

해당 글은 패스트캠퍼스의 김민태의 프론트엔드 아카데미 강의를 수강한 내용을 정리한 것입니다.

타입스크립트란

자바스크립트는 웹언어로써 유일하며 정말 빠르게 성장하고 있습니다.

 

또한, 자바스크립트는 웹뿐만아니라, 엔진(node.js), 데스크탑 앱에도 사용할 정도로 발전해나가고 있습니다. 하지만 왜 타입스크립트를 사용하는 것일까요?

 

타입스크립트는 자바스크립트의 모든기능을 기본으로 제공하고 추가적인 기능을 제공합니다. 이로써 자바스크립트와 공생을 지향하는 언어라고 할 수 있습니다.

 

하지만 자바스크립트가 제공하지 못하는 것이 있습니다.

 

❗ 데이터에 대한 유형'입니다

 

타입스크립트는 데이터에 대한 유형을 제공하고 추가적인 기능을 제공하며 자바스크립트의 부족한 것을 채워주는 언어입니다.

타입이 제공되면 뭐가 좋은데?

예를 들어봅시다.

let age = 10;
// age 라는 데이터가 10살이구나! 유추가 가능하네!
let x =10;
// x가 뭐야 어떤의미야? 모른다...

 

그럼 변수명을 잘 작성하면 데이터에 대한 유추가 가능한데 왜 타입스크립트가 필요할까요?

아래의 코드를 확인해보세요.

let age = 10;  //1
let weight:number = 80; //2

 

1번을 봤을때는 차후에 age에 값을 변경할 때 11로 할지 '11살'로 할지 확인히 필요합니다.

 

하지만 2을 확인해보면 아' 몸무게는 number로 표현해야겠구나' 라고 확인할 수 있습니다.

 

이렇게 타입을 지정해주는 것만으로도 효율적이지만 타입스크립트는 한 단계 더 나아갑니다.

type cm = number;
let height:cm -176;

이 코드를 보시면 어떤가요?

 

우리는 알 수 있습니다. 아 'height는 cm 타입이구나 cm은 number로 되어있구나!'를 확인할 수 있습니다.

이 뿐만이 아닙니다! 아래의 코드를 확인해보세요

 

type RainbowColor = 'red' | 'orange' | 'yellow'

let color : RainbowColor = 'red'
color = 'black '//Error

 

무지개색 컬러는 red, orange, yellow 가 들어있어 이 RainbowColor를 타입으로 지정하면 이외의 컬러를 변수에 담을 때 에러가 나! 까지 코드만 보고 해석이 가능합니다 ! 🦸🦸🦸🦸

타입스크립트가 핫해진 이유!

 

이러한 타입스크립트 안 쓸 이유가 당연히 없죠. 하지만 개발자들에게 새로운 언어를 받아드리기는 쉽지않습니다.

그런데 어떻게 타입스크립트가 단기간에 이렇게 핫하게 자리를 잡게 되었을까요? 

 

우선 타입스크립트를 적용하기 위해서는 트랜스파일러 작업이 필요합니다.

 

웹개발자라면  바벨이라는 트랜스파일러를 익히 들어봤을 것입니다. 

기존에도 Babel이라는 트랜스파일러를 자바스크립트 변환처리를 하고있었습니다.

 

따라서 기존에 있는 프로세스를 사용하더라도 타입이라는 기능까지 추가적으로 제공하는 타입스크립트를 사용이 가능합니다. 따라서 웹 개발자들은 다양한 장점이 있는 타입스크립트를 사용을 하지 않을 이유가 없습니다.

 

따라서 타입스크립트에 대한 거부감이 크지 않았고, 성장을 급격히 할 수 있습니다. 

현재 타입스크립트는 많은 회사에서 표준 언어로 자리잡고 있는 상황입니다.