웹 브라우저는 타입스크립트 언어를 이해하지 못한다. 그래서 타입스크립트로 작성된 코드를 브라우저에서 실행시키는 과정에는 타입스크립트를 자바스크립트로 변환하는 과정이 포함되어 있다고 한다.

하지만 많은 기업들에서 타입스크립트에 기반을 둔 nest.js를 많이 이용한다. nest.js를 이용하지 않더라도, typeescript를 많이 이용하는 편인 것 같다. 그 이유는 무엇일까?

1. 예제

function add (num1, num2) {
  	conosle.log(num1 + num2)
}

1. add() // NaN
2. add(1) // NaN
3. add(3,4,5) // 7
4. add('hello', 'world')// helloworld
5. add(1,2) // 3

function showItems(arr) {
  arr.forEach((item) => {
  	console.log(item)
  }) 

6. showItems([1,2,3]) => // 1 2 3
7. showItems(1,2,3) => // TypeError

위 add 함수에서 5번을 제외한다면, 모두 함수의 목적에 적합하지 않은 매개변수들이 삽입된 것으로, 엄밀하게는 에러 처리 되어야 하는 항목들이다.
하지만 자바스크립트에서는 1~4번에 해당하는 내용들을 에러로 처리해주지 않는다. 요컨대, add 함수와 관련해서 1~4는 분명히 의도하지 않은 매개변수임에도, 자바스크립트에서는 어떠한 경고도 주지 않는 것이다.

7의 경우에서는 error가 발생했다. 왜냐하면, showItems에 삽입된 매개변수가 배열이 아니므로, forEach라는 함수는 사용할 수 없기 때문이다.

이는 자바스크립트가 타입 설정과 관련해 다음과 같은 특징을 가지고 있기 때문이다.

자바스크립트는 런타입시에 변수의 타입을 결정하고, 런타임 과정에서만 에러가 발생할 시에 이를 출력한다. 그래서 자바스크립트 환경에서 개발자가 변수의 타입을 제대로 핸들링하지 못했다면, 사용자가 그 에러를 고스란히 볼수도 있다.

반면, 타입스크립트는 정적 언어에 해당하는데, 이들은 다음과 같은 특징을 가지고 있어, 자바스크립트 환경에서 나타나는 문제들이 발생하지 않는다.

타입스크립트는 런타임 과정이 아니라 컴파일 과정에서 변수 타입이 결정되고, 이와 관련한 에러들이 핸들링 된다. 그래서 사용자가 타입과 관련한 에러들을 목격할 일이 없다.

2. JS와 TS의 차이: TypeError 핸들링 순간

즉, 타입스크립트와 자바스크립트의 차이는 코드 실행 과정에서 타입과 관련한 처리를 어느 단계에서 하는가?에서 나타난다고 볼 수 있다.

• 자바스크립트: 런타임 과정
• 타입스크립트: 컴파일 과정

컴파일 과정에서 TypeError를 핸들링한다는 것은 곧 개발 과정에서 개발자가 자칫 놓치기 쉬운 에러들을 더 꼼꼼하게 파악할 수 있다는 것을 의미한다고 생각한다.

그래서 Java, TypeScript와 같은 정적 언어들은 코드 작성시, 모든 변수마다 타입을 설정해줘야하기 때문에 작성 시간이 다소 길어질 수 있다는 단점이 있지만, 장기적으로 안정적이면서도 효율적인 에러핸들링, 코드 작성이 가능하다는 장점이 있는 것으로 보인다.