JavaScript vs TypeScript 대체 차이가 뭔데?

자바스크립트와 타입스크립트의 차이를 물으면, '자스가 타스야~' 또는 '타입 지정만 해주면 그게 타스야~' 라는 답변만 돌아올 뿐 명확하게 차이점이 와닿지 않아서 오늘은 자바스크립트와 타입스크립트의 차이를 알아보려 합니다.

 

우선 자바스크립트와 타입스크립트의 가장 큰 차이점이자, 차이점의 시초는 

자바스크립트는 동적 타입 언어, 타입스크립트는 정적 타입 언어라는 점입니다.

 

차이점 1. type의 유무

자바스크립트의 가장 큰 장점이자 단점은 타입스크립트와는 다르게 변수나 객체의 타입을 지정하지 않는다는 점인데요!

이 부분을 보완해서 마이크로소프트에서 개발한 것이 타입스크립트입니다.

// JavaScript
var a = 1
var b = 2

var c = a + b

// TypeScript
var a:number =1
var b:number =2

var c:number

c =a+b

자바스크립트에서는 타입을 지정해주지 않기 때문에 편리하다는 생각이 들 수 있지만,

자바스크립트가 동작하면서 나도 모르게 형변환이 된다던지, 예기치 못한 버그가 발생할 수 있다고 합니다.

실제로 자바스크립트의 버그의 15%를 타입스크립트를 사용함으로써 미리 예방을 할 수 있다고 해요.

 

하지만 매번 타입을 지정해주는 것이 번거롭고, 그만큼 작성해야 하는 코드가 많아진다는 점이 있죠.

 

차이점 2. 인터프리터 언어 vs 컴파일 언어

자바스크립트는 인터프리터 언어,  타입스크립트는 컴파일언어입니다.

 

인터프리터 언어는 컴파일 과정이 없기 때문에 에러를 출력하지 않고 실행이 됩니다.

하지만 컴파일 언어의 경우 컴파일 단계에서 타입 관련 에러를 막을 수 있습니다.

 

예를들어, strictNullCheck 옵션을 true로 해놨다면 객체/null/undefined가 할당될 수 있는 변수가 있을 때, null이나 undefined가 아닌지 체크하지 않고서는 객체의 속성을 가져올 수 없습니다.

 

또한 타입스크립트는 컴파일 과정에서 ES6+ 문법들을 ES5/ ES3로 바꿔주기 때문에 크로스브라우징 문제에 머리아파사지 않아도 된다는 점!

 

하지만 타입스크립트는 컴파일 언어이기 때문에 자바스크립트로 컴파일을 해주는 시간이 소요가 되어, 자바스크립트만을 독립적으로 사용했을 때 보다 속도 차이가 있습니다.

 

 

차이점 3. 런타임 에러 vs 컴파일 에러

// JavaScript
function plus(a, b){
    var c = a + b // 런타임 에러
    return c
}

var a = 1
var b = "aa"				

console.log("a+b=" +plus(a, b))

// TypeScript 
function plus(a:number, b:number):number{
    var c:number = a + b
    return c
}

var a:number = 1
var b:number = "aa" // 컴파일 에러

console.log("a+b=" +plus(a, b))

위 코드는  string b와 number a를 더하는 c 오류 코드 인데요.

자바스크립트의 경우 프로그램이 잘 돌아가다가 더하는 과정에 와서야 런타임 오류가 나지만, 

타입스크립트의 경우 프로그램이 돌아가기도 전에 컴파일 오류가 발생합니다.

 

때문에 오류가 발생했을 때, 컴파일 오류가 발생하는 타입스크립트의 경우 보다 쉽게 오류를 발견하여 수정할 수 있겠지요?

 

 

차이점 4. 유연성 vs 결합성

자바스크립트는 타입을 지정하지 않기 때문에, 자료형을 바꿔가며 사용하는 것이 가능해 유연성이 좋은데요.

반면 타입스크립트는 한번 타입을 지정하면 자료형을 변경할 수 없습니다.

var a = "string이였는데요"
var b = 2
a = 1 // number가 되었습니다

var c = a + b

 

그럼에도 타입 지정이 중요한 이유 중 하나는 타입 지정을 함으로써 IDE와의 결합성이 좋다는 점입니다.

ctrl + click으로 class와 function을 쉽게 역추적할 수 있어 하나하나 기억할 필요 없이 추적에 필요한 시간을 줄일 수 있습니다.

 

결론 

그렇다면 자바스크립트와 타입스크립트 중 어떤 언어를 써야할까?

타입스크립트가 자바스크립트의 상위호환이라고해서 타입스크립트가 무조건 좋은 걸까? 꼭 그렇지는 않습니다.

프로젝트 진행 시 가장 좋은 또는 가장 최신 기술을 무조건 적용시키는 것이 좋은 것이 아닌 것 처럼

프로젝트와 팀 상황에 가장 맞는 언어를 선정하여 진행하는 것이 가장 좋습니다!

 

자바스크립트와 타입스크립트의 특징들을 고려하여 언어를 선택하기보다는 팀원들이 어떤 언어의 장점을 더 극대화하여 사용할 수 있을지를 고려하는 것이 더욱 도움이 될 것이라고 생각합니다.

 

아래 요약 테이블을 참고하시고 더 알맞은 언어를 선택하는데에 도움이 되었으면 좋겠습니다 :-)

JavaScript	TypeScript
동적 타입 언어	정적 타입 언어
인터프리터 언어	컴파일 언어
독립적으로 사용 가능	자바스크립트에 의존적임 (자바스크립트로 컴파일된 후 실행)
유연성	IDE와의 결합성
작고 간단한 프로젝트에 적합	복잡한 프로젝트에 적합

이상입니다~