인사이트

타입스크립트 컴파일러

최져니 2025. 4. 17. 13:09

타입스크립트 컴파일러

 

💡 타입스크립트 컴파일러가 Go로 재작성되고 있는 이유 → 성능 향상

 타입스크립트 컴파일러는 타입스크립트 자체로 작성되어 Node.js 환경에서 실행되었다. 이는 개발 초기에는 유연성을 제공했지만대규모 프로젝트에서 빌드 속도가 느리고 메모리 사용량이 많다는 단점이 있었다.

 

Go 언어는 빠른 컴파일 속도, 낮은 메모리 사용량, 그리고 뛰어난 동시성 지원으로 알려져 있다. 타입스크립트 팀은 Go로 컴파일러를 재작성함으로써 다음과 같은 이점을 기대하고있다.

 

  • 훨씬 빠른 빌드 속도: 최대 10배까지 성능 향상
  • 낮은 메모리 사용량: 대규모 프로젝트에서도 효율적인 컴파일 가능
  • 향상된 개발자 경험: IDE에서의 코드 완성, 오류 검사 등의 속도가 빨라져 더욱 쾌적한 개발 환경을 제공

 

(논란)? C#과 Rust 모두 WASM에 대한 강력한 지원을 하는데 왜 Go인가? https://github.com/microsoft/typescript-go/discussions/411

 

Why Go? · microsoft typescript-go · Discussion #411

Language choice is always a hot topic! We extensively evaluated many language options, both recently and in prior investigations. We also considered hybrid approaches where certain components could...

github.com

 

타입스크립트 컴파일러 

타입스크립트 코드를 분석하여 타입 정의 파일(.d.ts) 또는 소스 맵(.js.map)과 함께 자바스크립트(.js)로 컴파일하는 도구

 

컴파일과정

SourceCode ~~Scanner~~> Tokens ~~Parser~~> AST ~~Emitter~~> JavaScript

 

1. 프로그램(Program)

tsc 명령어를 입력하면 컴파일 과정이 시작된다.

이를 실행하려면 tsconfig.json 파일이 필요하다. 해당 파일은 핵심적인 두 부분인 Compiler Options와 input Files를 정의한다. 

가장 최초로 불러온 파일을 기준으로 컴파일 과정이 시작된다.

 

2. 스캐너(Scanner)

소스코드를 작은 단위로 나누어 의미 있는 토큰으로 변환하는 작업을 수행.

 

3. 파서(Parser)

자바스크립트 코드를 실행 단계인 바이트코드로 변경시키기 위한 중간 과정.

스캐너가 소스 파일을 토큰으로 나누어주면 파서는 그 토큰을 활용해 AST를 생성한다.

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

* AST를 탐색하여 오류점이 있는 확인하는 도구가 ESlint

 

 

4.바인더(Binder)

바인더의 주요 역할은 심볼을 생성하는 것.

*심볼: 이전 단계의 AST에서 선언된 타입의 노드 정보를 저장, AST 내부의 declaration nodes 간 연결 지원

 

 

5.체커(Checker)와 이미터(Emitter)

체커(Checker)는 파서가 생성한 AST와 바인더가 생성한 심볼을 활용하여 타입 검사를 수행한다. 

체커는 checker.ts현재 23,000줄이 넘는 TypeScript(컴파일러에서 가장 큰 부분)에 위치한다.

 

이미터(Emitter)

emitter.ts: emitFiles(), 타입스크립트 -> 자바스크립트를 수행하는 이미터

declarationEmitter.ts: declaration file(.d.ts)을 생성하는 이미터

 

* 타입스크립트 AST 뷰어와 관련 명세

https://ts-ast-viewer.com/#code/GYVwdgxgLglg9mABFApgZyogFCNKBOAXBvjGAOYCUA3gFCIOIQJpwA2KAdG3OTnvkq0AvrVqoMWAEQArBCimUgA

https://boostbrothers.github.io/technology/2021/07/12/typescript-source-file%EC%9D%84-%EB%AC%B8%EC%84%9C%ED%99%94%ED%95%98%EA%B8%B0/

 

출처: https://news.hada.io/topic?id=19695