[우아한 타입스크립트] 6장

📍 자바스크립트의 런타임과 타입스크립트의 컴파일

런타임과 컴파일타임

프로그래밍 언어는 고수준, 저수준 언어로 구분 가능하다.

고수준 언어는 사람이 이해하기 휘운 형식으로 작성, 저수준 언어는 컴퓨터가 이해하기 쉬운 형식으로 작성된다.

자바스크립트는 대표적인 고수준 언어에 속하며 컴파일러나 인터프리터에 의해 저수준 프로그래밍 언어로 번역되어 실행된다.

 

소스코드는 컴파일러에 의해 기계어 코드로 변환되어 실행 가능한 프로그램이 되는데 이 단계를 컴파일타임이라고 한다.

컴파일타임은 소스코드가 컴파일 과정을 거쳐 기계어 코드로 변환되어 실행할 수 있는 프로그램이 되는 과정을 의미한다.

소스코드의 컴파일이 완료되면 프로그램이 메모리에 적재되어 실행되는데 이 시간을 런타임이라고 한다.

즉, 컴파일 과정을 마친 응용 프로그램이 사용자에 의해 실행되는 과정

 

자바스크립트 런타임

자바스크립트 런타임은 자바스크립트가 실행되는 환경

ex) 크롬, 사파리 같은 인터넷 브라우저와 Node.js

자바스크립트 런타임의 주요 구성 요소에는 자바스크립트 엔진, 웹 API, 콜백 큐, 이벤트 루프, 렌더 큐가 있다.

 

타입스크립트의 런타임

컴파일은 추상화 단계가 다른 고수준 언어에서 저수준 언어로 변환되는 과정을 가리킨다.

타입스크립트는 tsc로 불리는 컴파일러를 통해 자바스크립트 코드로 변환된다.

하지만 타입스크립트는 고수준 언어(타입스크립트)가 또 다른 고수준 언어(자바스크립트)로 변환되는 것이기 때문에 컴파일이 아닌 트랜스파일이라고 부르기도 한다.

타입스크립트 컴파일러를 소스 대 컴파일러라고 지칭하기도 한다.

 

타입스크립트는 .ts 확장자가 붙은 파일을 컴파일하고 .js 확장자가 붙은 자바스크립트 파일을 만든다.

타입스크립트 컴파일러는 소스코드를 해석해 AST(추상 구문 트리)를 만든 후 타입 확인을 거친 다음 결과 코드를 생성한다.

 

AST(Abstract Syntax Tree)
컴파일러가 소스코드를 해석하는 과정에서 생성된 데이터 구조
컴파일러는 어휘적 분석과 구문 분석을 통해 소스코드를 노드 단위의 트리 구조로 구성한다.

 

타입스크립트는 컴파일타임에 타입을 검사하기 때문에 에러가 발생하면 프로그램 실행이 안된다.

이런 특징 때문에 타입스크립트를 정적 타입 검사기라고 한다.

function add(a: number, b: number) {
  return a + b;
}

add(10, 20);
add(10, "20"); // 에러 발생

 

 

✨ 타입스크립트 컴파일러의 동작

코드 검사기로서의 타입스크립트 컴파일러

타입스크립트 컴파일러는 코드에 타입 오류가 없는지 확인한다.

타입스크립트에서는 컴파일타임에 코드 타입을 확인하기 때문에 코드를 실행하지 않아도 오류를 찾을 수 있다.

컴파일타임에 문법 에러, 타입 관련 에러를 모두 검출한다.

자바스크립트에서는 런타임에 발견할 수 있는 에러를, 타입스크립트에서는 컴파일타임에 발견해 실행 과정에서 발생할 수 있는 문제를 방지한다.

 

코드 변환기로서의 타입스크립트 컴파일러

타입스크립트 컴파일러는 타입 검사 후 타입스크립트 코드를 각자의 런타임 환경에서 동작할 수 있는 구버전의 자바스크립트로 트랜스파일한다.

타입스크립트 소스코드는 파싱하고 자바스크립트 코드로 변환해야 실행할 수 있다.

 

타입스크립트 컴파일러는 타입 검사 수행 후 코드 변환을 시작하는데 이때 타입 오류가 있어도 일단 컴파일을 진행한다.

타입스크립트 코드가 자바스크립트 코드로 변환되는 과정은 타입 검사와 독립적으로 동작하기 때문이다.

 

👉🏻 타입스크립트 컴파일러의 역할

1. 최신 버전의 타입스크립트, 자바스크립트 코드를 구버전의 자바스크립트로 트랜스파일

2. 코드의 타입 오류 검사

 

 

‼️ 타입스크립트 컴파일러의 구조

컴파일러는 한 프로그램으로 이를 구현한 소스 파일이 존재한다.

타입스크립트 컴파일러는 다섯 단계를 거쳐 타입 검사와 자바스크립트 소스 변환을 진행한다.

스캐너: .ts 토큰화
↓
파서: 토큰 기반 AST 생성
↓
바인더: AST 노드 기반 심볼 생성
↓
체커: AST + 심볼 기반 타입 검사
↓
이미터: AST + 코드 검사 기반 .js 생성

 

 

프로그램

타입스크립트 컴파일러는 tsc 명령어로 실행되고 tsconfig.json에 명시된 컴파일 옵션을 기반으로 컴파일을 수행한다.

먼저 전체적인 컴파일 과정을 관리하는 프로그램 객체(인스턴스)가 생성되고 이 객체는 컴파일할 타입스크립트 소스 파일과 임포트된 파일을 불러오는데, 가장 최초로 불러온 파일 기준으로 컴파일 과정이 시작된다.

 

스캐너

스캐너는 타입스크립트 소스 파일을 어휘적으로 분석해 토큰을 생성한다.

즉, 소스코드를 작은 단위로 나눠 의미 있는 토큰으로 변환하는 작업을 수행한다.

 

파서

파서는 스캐너가 준 소스 파일의 토큰 정보를 이용해 AST를 생성한다.

AST는 컴파일러가 동작하는 데 핵심 기반이 되는 자료 구조로, 소스코드의 구조를 트리 형태로 표현한다.

스캐너는 어휘적 분서글 통해 토큰 단위로 소스코드로 나누지만 파서는 생성된 토큰 목록을 활용해 구문적 분석을 수행한다.

이를 통해 코드의 실질적인 구조를 노드 단위의 트리 형태로 표현한다.

 

바인더

바인더의 주요 역할은 체커 단계에서 타입 검사를 할 수 있게 기반을 마련하는 것이다.

타입 검사를 위해 심볼이라는 데이터 구조를 생성하고 그에 대응하는 AST 노드를 연결하는 역할을 수행한다.

심볼은 이전 단계의 AST에서 선언된 타입의 노드 정보를 저장한다.

export interface Symbol {
  flags: SymbolFlags;
  escapedNamd: string;
  declarations?: Declaration[];
  //...
}

 

체커와 이미터

체커는 파서가 생성한 AST와 심볼을 활용해 타입 검사를 수행한다.

체커는 AST의 노드를 탐색하면서 심볼 정보를 불러와 소스 파일에 대한 타입 검사를 진행한다.

체커의 타입 검사는 다음 컴파일 단계인 이미터에서 실행된다.

checker.ts의 getDiagnostics() 함수로 타입을 검증하고 타입 에러에 대한 에러 메시지를 저장한다.

 

이미터는 타입스크립트 소스 파일을 변환하는 역할을 한다.

타입스크립트 소스 파일을 자바스크립트 파일과 타입 선언 파일(d.ts)로 생성한다.

 

 

🌟 타입스크립트 컴파일 과정 정리

1. tsc 명령어 실행해 프로그램 객체가 컴파일 과정 시작

2. 스캐너는 소스 파일을 토큰 단위로 분리

3. 파서는 토큰으로 AST 생성

4. 바인더는 AST의 각 노드에 대응하는 심볼 생성, 심볼은 선언된 타입의 노드 정보 담고 있다.

5. 체커는 AST를 탐색하면서 심볼 정보 활용해 타입 검사

6. 타입 검사 결과 에러가 없으면 이미터로 자바스크립트 소스 파일 변환