[TS] TIL, 타입스크립트의 컴파일러 동작 방식

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

타입스크립트의 컴파일러 동작은 간단히 이와 같이 이루어진다. 

1. tsconfig.json을 먼저 읽고 실행하게 된다. 
2. PreProcess Files
3. Tokenize(Scan) and Parse 
4. Binder
5. Type Check
6. Transform
7. Emit

각 단계를 구체적으로 알아보자.

1. tsconfig.json 읽고 실행

tsconfig.json파일은 ts를 js로 어떻게 변환할지 어떤 옵션을 따를지 명시하는 컴파일 설정파일이다. 그래서 가장 먼저 읽는다. 

처음 설정을 하게 되면 어떤 버전의 javaScript로 변환할지, 타입을 얼마나 엄격하게 할지 정해져 있다. 그 외에도 설정은 개인적으로 프로젝트에 맞게 설정해주면 된다.

3. PreProcess Files

tsconfig.json를 해석한 후 root파일부터 시작해서 import/export로 연결된 모든 의존성 파일들을 탐색한다. 
root파일과 엮여있는 모든 파일들을 찾는 과정이 끝난 후 다음 과정이 시작된다. 

 

3. Tokenize(Scanner) and Parse 

Scanner을 통해 소스코드를 토큰 단위로 나눈다. 나뉜 토큰들을 바탕으로 Parser가 AST를 생성한다. 

4. Binder

파싱이 끝나면, TypeScript는 Symbol을 추적하기 위해 Binding을 수행한다. 심볼이라는 구조를 만들어서 타입 체커 단계에서 타입 검사를 할 수 있도록 기반을 마련하는 것이다. 

5. Type Checking

바인딩 단계를 통해 만들어진 심볼 정보를 바탕으로 타입 검사를 수행한다. JS로 변환되기 전, 타입 관련 오류를 미리 걸러낸다.

6. Transformer

기존의 AST를 기반으로 불필요한 타입 정보나 TS 전용 문법을 제거한다. 

7. Emitter

실제 실행 가능한 JS로 변환하는 역할을 한다. 

tsc a.ts

a.ts 에는 JS로 변환하고 싶은 파일을 넣어 변환하면 된다. 

해당 명령어를 수행하면 세가지 파일이 나온다. 

• a.js : 실행 가능한 JavaScript
• a.map: 타입 선언 정보
• a.d.ts: 소스맵