[CS] 타입스크립트의 컴파일 과정

타입스크립트는 브라우저가 바로 이해할 수 없기 때문에 JS로 변환하는 과정이 필요하다.
이 과정에서 타입스크립트 컴파일러(tsc)가 어떻게 코드를 JS로 트랜스파일하고, 타입 검사 및 추론 과정이 어떻게 진행되는지 살펴본다.

 

1. Scanner (Lexer)

연속된 글자인 소스코드를 컴파일러가 이해할 수 있는 의미 단위로 토큰화하는 과정이다.

let age: number = 25;

이를 토큰화하면 let identifier(age) : number = 25 ; 로 분리된다.
토큰 단위로 쪼개면 파서가 구조를 이해하기 쉬워진다.

 

2. Parser

토큰을 AST(추상 구문 트리)로 변환한다.
코드 구조를 트리 형태로 표현해 컴파일러가 변수, 함수, 클래스, 표현식 등을 분석할 수 있게 한다.

VariableDeclaration
 ├─ name: age
 ├─ type: number
 └─ initializer: 25

 

3. Binder

Parser에서 완성된 AST를 읽어 타입 검사에 필요한 데이터를 수집하는 과정이다.
AST를 기반으로 Symbol Table을 구성하고, Scope를 관리하는 단계이다. 즉, 타입체크를 하기 전에 이름과 위치, 선언 정보를 미리 정리하는 과정!

• Symbol: 변수, 함수, 클래스 등 이름과 관련된 메타 정보
  • ex. 변수 이름, 타입, 선언 위치, 스코프 정보 등등...
• Scope: 이름이 유효한 범위
  • ex. 전역, 함수 내부, 블록 내부 등등 ...

Binder는 AST를 순회하며 각 선언 노드를 발견하면 심볼 테이블에 등록하고, 스코프 계층 구조를 생성한다.

 

4. Type Checker

Binder와 AST 정보를 이용해 정적 타입 검증을 수행한다. (변수, 함수 호출, 연산 등의 타입 일치 여부를 확인한다.)
타입이 맞지 않으면 컴파일러가 에러를 발생시킨다. TS는 런타임 시점이 아닌 개컴파일 단계에서 타입 오류를 체크하는데, 이 오류 탐지를 수행하는 단계이다.

 

5. Transpiling (Emitter)

타입체크 결과와 AST를 기반으로, TS 코드를 JS 코드로 변환한다.
타입 정보를 제거하고, 화살표 함수를 일반 함수로 변환하는 둥의 TS 문법을 JS 표준 문법으로 변환한다.

var age = 25;