javascript 와 typescript의 타입 시스템 기능

typescript는 javascript의 superset 언어로써, 초보자인 내가 보기엔 type이 묻어있는 javascript 이런 느낌이었다. (사실 지금도 그렇다.) 하지만 그 차이점을 먼저 정리해야 내 머릿속에 이 잘못된 인식이 바로잡힐 것 같다.

 type 이라는 개념은 typescript에만 존재하는 것이 아니다. number, string, boolean, enum 등등 자료형은 거의 대부분의 언어에 존재한다. typescript가 javascript와 가장 다른 점은 이 type을 언제 어떻게 결정, 변환, 검증 및 검출하는가 이다.

타입 시스템 기능	자바스크립트	타입스크립트
결정 방식	동적 타입 바인딩	대부분 정적, 점진적
변환 방식	자동으로 변환된다. (묵시적/암묵적 타입 변환)	대부분 자동으로 변환되지 않는다.
타입 확인 시점	런타임에 확인	컴파일 시점에 확인
에러 검출 시점	대부분 런타임에 확인된다.	대부분 컴파일 시점에 확인된다.

 

1. 바인딩 결정 방식
자바스크립트는 동적 타입 바인딩 언어로써, 프로그램이 실행되기 전에는 타입에 대한 결정이 내려지지 않는다. 따라서 타입 검증을 프로그램 실행 전에 미리 할 수 없다. 
타입스크립트는 대부분 정적으로 타입을 결정한다. (타입을 미리 선언해주어야하기 때문이다.) 대부분이라는 단어가 붙은 이유는 타입스크립트는 annotation 이 없을 때 타입을 추론하는 기능도 갖고 있기 때문이다. 점진적으로 타입을 결정한다는 것은 타입을 일부 몰라도 언어를 사용할 수 있다는 의미다. 가능한 많은 타입을 아는 것이 유리할 뿐, 타입이 없어도 어떻게든 컴파일은 된다.(feat. 에러 파티)

2. 변환 방식
자바스크립트는 타입을 자기가 알아서 바꾼다. 밑의 예시에서는 숫자 3과 배열 [1] 을 둘 다 스트링으로 바꾸어버렸다. (암묵적 타입변환)
밑의 + 연산자는 피연산자가 스트링이라고 생각하고 다른 피연산자까지 스트링으로 변환, '31'을 돌려줬다.

3 + [1] === '31'

이에 반해 타입스크립트는 타입을 자동으로 변환해주지 않고, 에러를 띄워준다. 

+ 연산자에 number 랑 number로 구성된 배열을 같이 못쓴다고 짜증내는 타입스크립트

3. 타입 검사 시점, 에러 검사 시점
자바스크립트는 타입에 대한 불평을 거의 하지 않는 대신, 암묵적으로 타입 변환을 알아서 해버린다. 하지만 runtime이 되기 전까지는 뭐가 될지 알 수 없다. 타입스크립트는 점진적으로 타입을 조금씩 야금야금 확인하는 언어인데, 자기가 타입을 알아서 바로바로 추론해버린다. 또한, 타입스크립트는 컴파일시에 모든 타입을 모른다고 해도 일단 컴파일이 되기는 된다. (eslint로 any type을 막아놓거나... 그러지 않는 이상에는...)

따라서 에러 검사 시점 역시 각자의 타입 검사 시점과 동일할 수 밖에 없다. 타입확인이 그 때 되니까!

참고문서

- 타입스크립트 프로그래밍_보리스 체르니 지음_ 프로그래밍 인사이트