6.2 타입스크립트 컴파일러의 동작
: 타입스크립트 컴파일러는 타입스크립트 소스가 자바스크립트 소스로 변환되는 모든 과정에 영향을 줌.
.
.
.
1. 코드 검사기로서의 타입스크립트 컴파일러
: 코드에 타입 오류가 없는 지 확인.
-
정적으로 코드 분석 -> 에러 검출
-
코드 실행 전 자바스크립트 런타임에서 발생할 수 있는 에러 사전에 알려줌.
-> 컴파일 타임에 문법 에러와 타입 관련 에러 모두 검출.
-
JS에서는 런타임에서 발견할 수 있는 에러를, TS에서는 컴파일타임에 발견 -> 실행 과정에서 발생할 수 있는 문제 방지.
-
TS 컴파일러 : tsc binder 사용 -> 타입 검사 -> 컴파일타임에 타입 오류 발견.
2. 코드 변환기로서의 타입스크립트 컴파일러
: TS 코드를 각자의 런타임 환경에서 동작할 수 있도록 구버전의 자바스크립트로 트랜스파일함.
-
TS 소스코드는 브라우저와 같은 런타임에서 실행될 수 x
( JS 소스코드 파싱 -> JS 코드로 변환해야 비로소 실행 가능 o ) -
TS 컴파일러는 타입 검사를 수행한 후 코드 변환 시작 -> 이때 타입 오류 있더라도 일단 컴파일 실행 o
- JS 코드로 변환되는 과정은 타입 검사와 독립적으로 동작
- TS 코드의 타이핑이 잘못되어 발생하는 에러 -> JS 실행 과정에서 런타임 에러로 처리됨.- JS : 타입 정보 이해 x
-
TS 컴파일 이후에는 타입 제거 되어 순수 JS코드만 남음.
컴파일된 코드가 실행되고 있는 런타임에서는 타입 검사를 할 수 없기 때문에 주의해야 하는 경우도 있음. -
TS 컴파일러의 역할이 바벨과 같은 점과 다른 점
바벨 ( Babel )
: ECMAScript 2015 이후의 코드를 현재 또는 오래된 브라우저와 호환되는 버전으로 변환해주는 JS 컴파일러.
-
TS 컴파일러의 역할이 바벨과 같은 점과 다른 점...?
- 같은 점 : tsc와 바벨은 소스코드를 ES5 이하의 JS 코드로 컴파일해줌. - 다른 점 : 바벨은 타입 검사 x -> 최신 버전의 JS 코드를 낮은 버전으로 컴파일하는 것이 바벨의 주요 역할.
도서참조 : 우아한 타입스크립트 with 리액트
