타입스크립트란?
타입스크립트란 자바스크립트에 타입을 부여한 언어로, 자바스크립트의 확장판이라고 볼 수 있습니다.
타입스크립트를 사용하는 이유
주변에서 타입스크립트를 처음 접해본 주니어개발자분들의 이야기를 나누어보면 꼭 이런말씀을 하십니다.
🤷 자바스크립트랑 다른게 뭐야? 그냥 타입만 써주면 되는거야? 굳이 새로 배워야 돼?
사실 저도 타입스크립트를 처음 접할때는 그랬습니다. 그런데 실제로 사용하다보니 생각이 바뀌었고, 필요성을 깨닫게 되었습니다. 타입스크립트는 아래 두 가지 관점에서 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있습니다.
에러의 사전 방지
타입스크립트를 사용하면 에러를 사전에 미리 예방할 수 있습니다. 아주 간단한 예시를 통해 알아보겠습니다.
// sum.js
function sum(a, b) {
return a + b;
} // sum.ts
function sum(a: number, b: number) {
return a + b;
} 두 코드 모두 두 숫자의 합을 구하는 함수입니다. 차이점이 있다면 타입스크립트 코드에서는 매개변수의 뒤에 number 라고 타입이 부여되어 있습니다. 이 함수들을 사용할때는 아래처럼 사용할 것입니다.
sum(100, 200); // return => 300 자바스크립트 함수로 호출하나, 타입스크립트 함수로 호출하나 결과는 동일할 것 입니다. 하지만 다음과 같은 상황에서는 어떨까요?
sum("100", "200")
// if javascript return => "100200"
// if typescript return => Type Error 자바스크립트에서 100200이 나오는 것은 절대 어색하지 않습니다. 당연한 결과죠. 하지만 타입스크립트에서는 에러를 출력합니다. 왜 그럴까요?
정답은 매개변수에 타입을 부여하여 들어올 수 있는 데이터 범주에 제한을 걸었기 때문입니다.
이처럼 타입스크립트에서는 타입을 부여하여 혹시나 발생할수도 있는 에러들을 사전에 방지할 수 있습니다.
개발 생산성 향상
자바스크립트에 타입이 부여되면 개발자가 개발을 할 때 좀 더 편리함을 느낄 수 있습니다. 아래 코드를 살펴보겠습니다.
// sum.js
function sum(a, b) {
return a + b;
}
var total = sum(10, 20);
total.toLocaleString(); 💡 toLocaleString()을 숫자(number) 타입에 사용하면 1,000단위로 끊어서 출력해줍니다.
사실 toLocaleString()이 어떤 역할을 하는지는 중요하지 않고 total이라는 변수를 사용하려는 시점에 타입이 number라는 것을 인지하지 못하고 있는 것이 중요합니다. 우리는 sum함수가 number타입의 데이터를 반환하고, total에 그 데이터가 저장될 것을 당연히 알고 있습니다. 그래서 toLocaleString()을 사용한 것이죠.
그럼 대체 이게 개발 생산성 향상이랑 무슨 상관일까요?
여기서부터는 실제로 저 코드를 코딩한다고 가정해보겠습니다.
자바스크립트로 작성한 코드입니다. 보시면 매개변수인 a, b에 타입이 부여되어 있지 않죠. total변수에 toLocaleString()을 사용하려고 입력하는데, 자동완성이 되지 않습니다. total변수가 어떤 타입인지 모르기때문에 그렇습니다.
결국 toLocaleString()이라고 하나하나 일일이 작성해주었습니다. 실수로 toLoclaeString()이라고 써도 실행했을때만 오류를 확인할 수 있었을 것입니다.
이걸 타입스크립트로 작성하면 어떻게 될까요? 확인해보겠습니다.
// sum.ts
function sum(a: number, b: number) {
return a + b;
}
var total = sum(10, 20);
total.toLocaleString(); 
Good...👍 정말 Good👍입니다. total변수의 타입이 number인 것을 알고 있기 때문에 toLocaleString()에 대해 자동완성 기능을 제공해 주는 것을 볼 수 있습니다.
자바스크립트로 작성했을 때와 다르게 오타를 방지할 수 있고 오류를 찾아내야 하는 과정도 생략할 수 있겠죠.
사소해 보이지만 엄청난 양의 코드를 다룰 때는 이런 작은 것들이 개발 생산성 향상에 큰 영향을 줄 수 있습니다.
댓글