우리가 사용하는 브라우저들은 타입스크립트를 이해하지 못하고, js로 변환해야 실행할 수 있다.
🛞 타입스크립트의 빌드 원리 :
우리가 사용하는 브라우저들은 타입스크립트를 이해하지 못한다. 이를 js로 변환해야 우리는 타입스크립트 코드를 실행할 수 있다.
타입스크립트의 동작 과정 요약 :
1. 개발자가 '타입스크립트 코드'로 작성합니다.
2. 작성한 타입스크립트 코드는 '타입스크립트 컴파일러'를 통해 파싱하여 '타입스크립트 AST 코드'로 변환됩니다.
3. 타입 검사기를 통해 파싱된 타입스크립트 AST 코드의 타입을 체크합니다.
4. 타입스크립트 AST의 코드를 '자바스크립트 코드'로 변환합니다.
- - 해당 과정까지는 '타입스크립트 컴파일러'에 의해 수행됩니다.
1. 자바스크립트 코드를 '자바스크립트 AST 코드'로 파싱합니다.
2. 자바스크립트 AST 를 '바이트 코드'로 변환됩니다.
3. 런타임이라는 실행환경에서 바이트 코드를 실행합니다.타입스크립트의 차별화된 특징
타입스크립트가 다른 언어와 다른 점은 컴파일러가 소스 코드를 바이트코드 대신 자바스크 립트 코드로 변환한다는 점,
타입스크립트는 컴파일 단계에서 AST를 만들어 결과 코드를 내놓기 전에 타입 확인 과정을 거친다.
🫥 타입스크립트와 자바스크립트의 타입 시스템 비교
타입 시스템 기능 : 자바스크립트 타입스크립트
타입 결정 방식 동적 정적
자동 타입 변환 O X
언제 타입을 확인? 런타임 컴파일 타임
언제 에러를 검출? 런타임 컴파일 타임
자바스크립트 같은 경우 프로그램을 실행해야만 특정 데이터의 타입을 알 수 있다.
반대로, 타입스크립트는 점진적으로 타입을 확인할 수 있다.
타입스크립트는 컴파일 타임에 프로그램의 모든 타입을 알고 있을 때 최상의 결과를 보여줄 수 있지만, 프로그램을 컴파일하는 데 반드시 모든 타입을 알아야 하는 것은 아니다.
이처럼 타입스크립트의 동작과 같은 점진적 타입 확인은 타입을 지정하지 않은 기존 자바스크립트 코드를 타입을 사용하는 타입스크립트로 마이크레이션할 때 매우 유용하다.
🚩 그래서 타입스크립트란?
타입스크립트는 자바스크립트에 타입을 부여한 언어이다.
자바스크립트의 확장된 언어라고 볼 수 있다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한 번 변환해 주어야 한다. 이 변환과정을 우리는 컴파일이라고 부른다.
타입스크립트는 에러의 사전 방지 효과가 있다.
실행 전 미리 코드 타입 에러를 띄워줌으로 써 의도치 않은 코드 동작을 예방할 수 있다.
또다른 장점을 코드를 작성할 때 개발 툴의 기능을 최대로 활용할 수 있다는 것이다.
변수에 대한 타입 지정이 되어있기 때문에 VSCode에서 해당 타입에 대한 api를 미리보기로 띄워줄 수 있다.
자바스크립트의 경우 뜨지 않는 미리보기가 타입스크립트에서 뜨곤 한다.
자바스크립트같은 경우 런타입 시에 타입을 결정해 적용되기 때문에, 컴퓨터에게 오류가 있는지 없는지 체크하라고 맡기는 것이다. 그렇다 보니 실행 속도가 오래 걸리지만, 타입스크립트는 사람이 코드 작성 시에 오류를 체크하고, 타입을 미리 결정하기 때문에 기계가 할 일을 덜어 실행 속도가 매우 빠르다는 장점이 있다.
자바스크립트의 경우 코드 기간이 오래지나서 내가 무슨 타입을 쓴지 모르거나, 협업하는 상대가 무슨 타입인지 짐작하기 어려울 수 있다.
하지만 타입스크립트는 타입을 명시하기 때문에 더 짐작하기 쉽다.
- 슈퍼셋
타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립트의 +알파이다.
자바스크립트와는 100% 호환이 되는 건 물론이며, 이 외에 클래스, 인터페이스 등 객체지향 프로그래밍 패턴을 제공한다.
자바스크립트의 단점은 줄여주고 대신 더 좋은 기능들을 감싼 형태라고 보면 된다.
