자바스크립트보다 타입스크립트를 사용하는 이유

JavaScript는 브라우저의 기반이 되는 스크립트 언어이다.

단기간에 만들어졌기 때문에, 빠르고 직관적이며 접근하기 쉬운 입문 언어로 많이 추천된다.

특히 프론트엔드 쪽에선 자바스크립트만으로 웹 클라이언트를 구축하기도 하며, 모든 웹의 동작을 다룬다고 봐도 무방하다.

 

그런데 JavaScript보다 TypeScript를 사용하는 경우가 매우 많아졌다.

 

왜 자바스크립트보다 타입스크립트를 사용하는 걸까?

여러 이유가 있겠지만, 바로 타입 안정성 때문일 것이다.

타입 안정성 덕분에, 개발할 때 예상하지 못한 버그를 줄일 수 있어서 개발 생산성을 높일 수 있다.

 

그럼 왜 타입 안정성은 중요한걸까?

 

---

 

JavaScript 의 문제 - 1) 타입 불안정성

자바스크립트는 매우 유연한 언어로, 다른 언어라면 실행될 수 없는 코드도 무조건 실행하여 기존 타입을 없애버린다.

아래와 같은 예제 코드를 보면 Boolean과 배열을 더하면 문자열로 병합되어 기존의 데이터 타입이 사라지게 된다.

true + [1,2,3]
// 'true1,2,3'

 

타입스크립트는 동일한 코드를 실행시키면, 당연하게도 + 연산이 불가능하다는 에러를 발생시킨다.

 

 

 

JavaScript 의 문제 - 2) 제대로 버그를 잡지 못함

아래 JS 예제코드를 보면, add 함수의 파라미터는 2개의 숫자로 이루어져야 한다고 정의했다.

그러나 임의로 1개의 문자를 넣더라도 자바스크립트는 함수를 실행시킨다.

결과가 NaN이더라도 어찌됐든 코드 실행은 되기 때문에 에러가 나지 않는다.

// 함수를 선언하고 정의
function add(a, b) {
    return a + b;
}

// 함수 정의문과 다르게 실행
add("aa") 
NaN // 실행 자체가 안 되는게 가장 이상적

 

가장 바람직한 케이스는 아예 함수 자체를 실행시키지 않고 에러를 반환하는 것이다.

 

타입스크립트로 동일한 코드를 실행시킨다면 사진처럼 타입 에러를 발생시켜 자바스크립트에서의 문제를 줄일 수 있다.

 

 

 

JavaScript 의 문제 - 3) 런타임 에러

위의 이슈와 비슷한 맥락인데 이상한 코드를 작성했더라도, 코드를 실행하고 나서야 에러를 확인할 수 있다.

다른 언어들 같으면 실행 자체를 막아 실행하고 나서 발생할 버그들을 미리 잡을 수 있는 코드들인데도 말이다.

const human = { name : "Sue"};
human.walk(); // 존재하지 않는 함수를 호출해도 실행은 됨

Uncaught TypeError: human.walk is not a function
    at <anonymous>:1:7

 

 

 

 

결과적으로 타입스크립트는 자바스크립트에서 타입이 정의되어 있지 않기 때문에 발생될 수 있는 버그들을

코드 실행 전에 막아주는 강력한 기능을 수행하면서 개발의 편의를 제공한다.