왜 타입스크립트는 환영받는가? (feat.타입과 에러)

devhan·2021년 1월 31일

🎉 타입스크립트를 왜 써야하는가를 살펴보다가 JS의 에러에 관한 이야기로 흘러들어와버렸다..

타입스크립트 문법을 배우기에 앞서, 자바스크립트의 수퍼셋이라고 하는데 무엇이 나아졌길래 사람들에게 사랑받는걸까?
찾아보니 가장 먼저 눈에 띄는 부분은 runtime error가 발생하지 않도록 개발단계에서 error를 처리할 수 있게 해준다는 거 같은데... 뭔가 확 와닿지 않았다.

런타임 에러? 왜 발생하면 안되는거야? 👀

프로그래밍을 하면서 에러는 나의 프로젝트의 진행을 방해하고, try-catch 구문으로 처리하는 것들이라고만 생각했지, 그 이상 생각해보지 않았던 것 같다..

런타임이란 무엇인가

간단하게 생각하면, 프로그램이 실행되는 환경을 이야기한다.
JS를 다루는 사람들에게 런타임 환경은 browser나 Node가 될 수 있겠다.
자바스크립트는 런타임에서 타입이 결정되는 dynamically typed 언어이다.

왜 런타임 오류는 치명적인가?

최악의 경우에는 프로그램이 멈춰버리기 때문이라고 생각한다.
개발 과정에서 예상되는 에러 케이스들을 try-catch 구문으로 처리해서 프로그램이 죽지 않도록 코딩했겠지만, 예상치 못한 케이스에서 에러가 발생한다면 프로그램은 멈출 수도 있고, 사용자는 최악의 사용자경험을 하게 될 것이다.

case1) 선언되지 않은 함수의 호출.
```
  JavaScript
  case1.

  const banana = () => 'banana';
  apple();
```
위 코드에서 apple은 선언되지 않은 함수기 때문에 호출이 불가능하다. 하지만 자바스크립트로 코드를 작성하고 저장하는 동안은 어떤 에러도 던지지 않는다.~~(eslint를 쓰면 잡아주긴 하네..)~~

하지만 브라우저에서 실행한다면 콘솔창에서 에러 메세지를 확인할 수 있다. (ReferenceError)

case2) 잘못된 함수의 호출.
```
  JavaScript
  case2.

  window.aler();  // window.alert();
```
두번째 경우는 alert를 aler이라고 코딩하고 실행한다면??
(이경우는 린트 기본 설정에서는 에러를 던지지 않았다.)

마찬가지로 콘솔창에서 에러를 확인 할 수 있었다.(TypeError)

그렇다면 타입스크립트는 무엇이 다른거지? 👀

타입스크립트는 Statically typed 언어!!
그래서 자바스크립트와 다르게 타입스크립트는 컴파일 환경에서 에러가 발생 💥

(ref: https://www.c-sharpcorner.com/article/getting-started-with-typescript-2-0/)

컴파일 환경? 컴파일러?

위키피디아에서는 컴파일러를 '특정 프로그래밍 언어로 쓰여 있는 문서를 다른 프로그래밍 언어로 옮기는 프로그램'이라고 설명하고 있다.

컴파일은 소스 코드를 기계어로 바꾸는 과정인데, 타입스크립트의 컴파일러는 타입스크립트 코드를 자바스크립트 코드로 바꾸어 주기 때문에, 트랜스파일이라고 할 수 있다.
타입스크립트는 컴파일 에러를 낸다.

타입스크립트는 컴파일 과정에서 에러를 잡아내기 때문에, 기존에 런타임에서 발생하던 에러를 개발단계에서 핸들링 할 수 있게 된다.
```
Typescript
 case1.

 const banana = () => 'banana';
 apple(); // 에러 발생 💥
```
(자바스크립트 사용시에는 런타임 환경에서 실행전까지는 에러 확인할 수 없는데..)
```
TypeScript
case2.

window.aler();  // 에러 발생 💥
```
(친절하게 alert를 쓰려고 했니? 알려주네 ㅎㅎ )