[이펙티브 타입스크립트+3] 코드 생성과 타입이 관계없음

https://www.typescriptlang.org/docs/handbook/babel-with-typescript.html#babel-for-transpiling-tsc-for-types

1장 타입스크립트 알아보기
아이템 3 | 코드 생성과 타입이 관계없음을 이해하기

3줄 요약
1. 타입스크립트 컴파일러는 타입스크립트 혹은 자바스크립트 파일을 구버전 자바스크립트 파일로 트랜스파일한다.
2. 타입스크립트 컴파일러는 코드의 타입 오류를 체크한다.
3. 이 둘은 독립적이다.

참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다.

---

타입스크립트 컴파일러는 (1)트랜스파일을 하고 (2)타입 체크를 합니다.
그리고 (1)과 (2)는 완전히 독립적입니다.

따라서, 타입 오류가 있는 코드 또한 트랜스파일이 가능합니다.

test.ts 파일에서 x 변수의 타입은 string입니다. 그러나 number 리터럴 값을 할당함으로써 타입 체크에서 에러가 발생합니다.
중요한 점은 그럼에도 불구하고 정상적으로 자바스크립트 파일로 트랜스파일 되었습니다.
(1)과 (2)과 독립적이기에 가능한 일입니다. 

그리고 당연한 이야기이지만 타입스크립트가 자바스크립트로 트랜스파일이 되면
타입스크립트에서 정의된 interface, type 등 타입 관련 구문들은 모두 제거됩니다.

따라서, 런타임에는 타입 체크가 불가능합니다.
런타임에 타입 체크를 해야 하는 경우가 생긴다면 타입을 이용한 체크가 아니라 다른 방식으로 진행해야 합니다.

트랜스파일된 asNumberBad 함수는 런타임에 리턴 값을 number 형으로 변환함을 보장하지 못한다.

그렇다면 런타임에 타입 체크를 한다는 의미는 무엇일까요?
코드를 작성할 때 특정 객체를 인풋으로 받아 처리를 하는 함수가 있다고 가정할 때,
그 특정 객체의 타입이 정해지지 않았거나 변경될 수 있다는 의미입니다.

그런 상황이 많지는 않겠지만 만일 외부 서비스로부터 데이터를 받아오는 경우에는
페칭된 데이터의 타입이 변경될 수 있습니다.
이러한 경우가 발생할 경우를 대비하는 한 방안으로 런타임에 타입을 비교하는 방안이 있을 겁니다.

물론 다른 방안들도 존재합니다.
1. 클래스의 경우에는 타입뿐만 아니라 값이기에 트랜스파일 시에 사라지지 않습니다. 따라서, 런타임에 비교 가능합니다.
2. 만일 객체의 속성 중 하나가 type을 알려주는 프로퍼티를 가지고 있다면 이를 통해 타입을 구분할 수 있습니다.
3. try / catch 문을 이용하여 페칭된 데이터가 제대로 동작하지 않으면 에러 핸들링하는 방식이 있습니다.
4. etc

타입스크립트 코드가 자바스크립트로 트랜스파일이 되면서 타입 관련 구문을 삭제하면서 얻는 이점이 있습니다.
런타임 성능에 영향을 미치지 않습니다. 즉, 런타임 오버헤드가 존재하지 않습니다.
그로 인해 빌드 타임 오버헤드가 있습니다만 그 컴파일러 속도가 충분히 빠르기에 걱정하지 않으셔도 됩니다!

 

Materials From
1. <이펙티브 타입스크립트>(댄 밴더캄 지음, 장원호 옮김, 인사이트 2021)
2. 타입스크립트 공식 홈페이지 | https://www.typescriptlang.org/ 

Typed JavaScript at Any Scale.

 

---

만일 타입 체크에 문제가 있을 때 트랜스파일을 막고 싶다면 tsconfig 설정에서 noEmitOnError를 설정하면 됩니다.

그러나 만일 해당 옵션이 설정되었다면 산출물을 만들 수 없기에 해당 프로그램의 다른 부분을 테스트해 볼 수 없는 단점이 있습니다.
각자 상황에 맞게 옵션을 설정을 하면 됩니다.

---

참고)
최근에는 프로젝트들에서 타입스크립트를 빌드할 때, 타입스크립트 컴파일러(tsc)를 이용하여 빌드하는 경우는 많지 않다.
주로 웹팩을 이용하여 바벨 로더(babel-loader)를 통해 타입스크립트 프로젝트를 트랜스파일 및 번들링하는 경우가 많다.
때문에 tsc는 많이 사용되지는 않고 바벨이 할 수 없는 타입 파일 생성 등에 사용된다.
반면에 타입스크립트 서버의 타입 체커는 많이 사용된다. 주로 에디터를 통해 언어 서비스를 제공받는다.