[ TypeScript] JavaScript 와 TypeScript는 무엇이 다를까?

 

 

왜 사람들은 자바스크립트에서 타입스크립트로 넘어와 타입스크립트를 많이 사용하는 것일까?

그 이유는 바로 타입 안정성 때문이다. 

타입 안정성으로 인해 코드에 버그가 엄청 많이 줄어들게 된다.

 

자바스크립트는 매우 유연한 언어이다. 그래서 최대한 에러를 안내고 개발자를 이해하려한다.

// console

[1, 2, 3, 4] + false
// '1,2,3,4false'

예를 들자면 위의 사례를 볼 수 있다.

배열과 불리언 타입의 false를 더했더니, 배열이 완전히 사라져버리고 불리언 타입의 false는 스트링이 되어버렸다.

전혀 허용할 수 없는 코드이지만, 자바스크립트는 유연한(?) 계산을 보여준다.

이것이 자바스크립트의 문제점이다.

 

다른 문제점을 하나 더 보자면,

function divide(a, b) {
	return a / b
    }
    
divide("abcd")
// NaN

이런 식으로 divide 함수를 올바르게 사용하도록 강제하지 않아 divide 함수에 이상한 값을 넣어도 코드 실행을 막아주지 않는다. ( divide의 함수의 입력 값은 2개가 필요한데 1개만 입력되어도 코드가 실행된다. )

 

자바스크립트는 a와 b가 필수 입력값인지 선택 사항인지 전혀 알고 있지 않기에 발생하는 문제이다.

 

마지막으로 자바스크립트의 런타임 에러 또한 알아보자.

const jude = { name : "jude" }

jude.hello()
// Uncaught TypeError: jude.hello is not a function

이 에러는 코드를 실행시키고 콘솔에서 확인할 수 있는 에러 메세지이다.

원래 이러한 에러는 실행 전에도 미리 알 수 있는 에러이다. 코드를 실행시키기 전 편집기에서 jude.hello()를 입력할 때 jude 라는 객체에는 hello라는 것이 존재하지 않는다고 알려줄 수 있다.

하지만 자바스크립트는 위의 예시와 같이 유저가 실행했을 때 비로소 에러가 있다는 것을 알 수 있다.

 

하지만 타입스크립트를 사용하면 개발자가 실행하기 전 이미 편집기에서 코드를 입력했을 때

잘못된 값, 타입들에 대해 에러를 알려주면서 잘못된 코드를 실행하면 유저한테 런타임 에러가 일어날 거라고 경고한다.

그래서 개발자들은 타입 안정성이 높은 타입 스크립트를 사용하는 것이다.