TypeScript Compile Process

💡 타입스크립트 코드를 작성하고, 실행되기까지의 과정은 크게 Compile, Bundle, Deploy 3번의 프로세스를 거친다. 한 번 타입스크립트가 어떻게 작동되는지 한 번 톺아보자!

타입스크립트 AST(Abstract Syntax Tree)

---

우선 모든 컴파일 과정의 기준이 될 추상 구문 트리를 만들어 낸다. 여기서 핵심이 될 두 가지는 Scanner와 Parser이다.

이들은 컴파일 과정에 각 구문을 토큰으로 추출하여 AST로 변환하기까지의 역할을 수행한다. 추상 구문 트리 (Abstract Syntax Tree)는 소스 코드에서 발생되는 구조를 트리 형식으로 나타낸 것이다. 자세한 코드가 아닌 추상적인 구문으로 나타낸 트리라는 것을 의미한다. 구문 트리가 만들어지면 이를 기준으로 분석, 타입 검사를 한다.

먼저 Scanner가 타입스크립트로 입력된 코드 문자열을 각각 예약어, 콜론, 부호 등의 토큰으로 분리시키는 역할을 한다. 위 그림의 Tokens는 Scanner를 통해 분리된 간단한 토큰들을 보여준다. (이 과정은 tokenizer라고 한다.)

Parser는 Scanner가 분리해준 토큰을 구문의 구조에 따라 트리 구조로 만들어내는 역할을 한다. 그리고 이 코드가 올바른 문법인지 분석하여 구문 오류를 잡아내는 역할도 맡고 있다.

타입 검사

---

타입스크립트 컴파일러의 가장 큰 역할을 하는 타입검사 단계이다. 이 단계에서는 binder, type system의 핵심이라 할 수 있는 type checker가 등장한다.

Binder는 전체 AST를 읽어서 타입 검사에 필요한 데이터를 수집하는 과정이다. 각 영역 별로 identifier를 구분하고 식별자가 어느 위치에 정의되었는지 어떤 플래그를 적용할 것인지 선택하여 메타데이터를 만들어 낸다. 이렇게 설정된 Symbol: primary building block of the TypeScript semantic system은 symbol table에 HashMap으로 저장된다. 이는 이후 단계에서 코드 분석을 진행할 때 기준이 된다. 아래는 함수와 변수를 symbol로 간단히 표현하고 있다.

functionName
FunctionDeclaration
Flags: Function

variableName
VariableDeclaration
Flags: BlockScopedVariable

또한 binder는 Flow nodes로 변수를 추적한다.

코드의 분기점이 되는 흐름 조건부, 즉 Flow Conditional을 기준으로 영역을 정하여 Flow Container를 지정한다.

타입스크립트는 검사할 노드로부터 부모 노드를 찾아가며 역방향으로 찾아가며 변수와 타입을 추적할 수 있다. 아래는 Typescript Playground에서 지원하는 플러그인으로 확인한 Flow Graph이다.

TypeChecker는 위에서 만들어 낸 AST와 Symbols table을 기준으로 타입 검사를 시행한다. 검사는 구조적으로 이루어 지며 외부에서 내부로 진행된다. 먼저 이 값이 object 형태인지, 다음은 필드, 마지막으로는 값의 타입이 일치하는지 비교한다. 이렇게 타입을 검사하는 특징을 타입스크립트의 구조적 타이핑이라고 한다.

{ age: number } = { age: 'nextree' }

위와 같은 경우에는 값을 비교할 때, TypeFlags.NumberLike와 ‘nextree’는 TypeFlags.StringLiteral이므로 false를 반환할 것이다.

이 비교는 TypeFlags를 사용하는데, 이 Enum은 Typescript 파일의 /src/compiler/types.ts에 정의되어 있으며, 가능한 모든 타입을 가지고 있다.

아래와 같이 타입을 지정하지 않을 경우에 AST의 initializer의 결과 값(’Hello world!’)의 타입을 message의 type 신텍스로 대입한다.

const message = 'Hello World!';

transform

---

타입스크립트 코드가 자바스크립트 코드로 변환하기 위해서는 compile Option이 필요하다. 우리는 이 옵션들을 tsConfig.json 파일로 관리할 것이다.

{
  "compilerOptions": {
    "module": "system",		// TSC가 컴파일할 대상 모듈 시스템
    "outDir": "dist",		// 생성된 자바스크립트의 디렉터리
    "target": "es2015",		// 컴파일 할 자바스크립트 버전
  },
  "include": ["src/**/*"],  // typescript 가 찾을 디렉터리
}

타입스크립트에는 AST를 파일로 변환하는 역할을 하는 emmiter가 있다. emitter에는 두 가지가 있는데 역할로 나눈 간단한 비교는 아래와 같다.

emitter.ts	declarationEmitter.ts
js code	.d.ts code

emitter는 AST와 Checker를 통해 자바스크립트 코드를 만들어 낸다.

먼저 타입스크립트 AST를 자바스크립트 AST로 변환한다. 간단하게 타입스크립트 AST에서 타입을 나타내는 keyword 신텍스를 제거하는 과정이라고 말 할 수 있다.

그 후, 각 문법 버전에 따라 Asset flag를 지정한다. transformer는 이렇게 Asset, 자바스크립트 코드, 타입스크립트 코드로 구분하여 처리한 후 자바스크립트 코드(.js)를 만들어 낸다. 또한 타입만 정의해 놓은 type definition(.d.ts) 파일도 함께 생성한다.

// es2015 Asset
const message: string = ‘Hello world’;  // typescript code
console.log(message);                   // javascript code

// 생성된 자바스크립트 코드
"use strict";
const message = 'Hello world';
console.log(message);

// 생성된 DTS 코드
declare const message: string;

이 .d.ts파일은 컴파일러가 만들어 내기도 하지만 사용자가 정의할 수 있는 파일이다. 이 파일로 변수 유형을 지정해 놓으면, 컴파일러는 .d.ts파일을 이용해 타입 추론에 참고한다.