[WIP]TypeScript의 동작 원리

목차

0. TypeScript란?

1. 전반적 동작 흐름

2. 파싱(Parsing)과 AST 생성

3. 타입 검사

4. 선언 파일(.d.ts)과 DefinitelyTyped(@types)의 역할

5. 트랜스파일(emit)과 출력(JS, sourcemap)

6. 모듈 해석과 tsconfig 옵션

7. 언어 서비스와 에디터 통합

8. 빌드 최적화

9. 런타임과의 관계

10. 실무에서 주의할 점

---

0. TypeScript란?

JS의 상위 슈퍼셋으로, 정적 타입 시스템을 제공하고, 컴파일러(tsc)를 통해 JS로 트랜스파일된다.

타입스크립트 자체는 런타임을 제공하지 않으며, 컴파일 타입의 타입 검사, 개발 도구 통합이 핵심 가치이다.

---

1. 전반적 동작 흐름

TypeScript 소스 (.ts, .tsx, .d.ts)가 처리되는 큰 흐름은 아래와 같다.

1. 파싱(Parsing) : 소스 코드를 토큰화 하여 AST(Abstract Syntax Tree)를 생성
2. 타입 검사 (Type Checking) : 1에서 생성한 AST 위에서 타입 추론 및 타임 검사 수행
3. 트랜스파일(Emit) : 타입 어노테이션을 제거하고 대상 JS 버전으로 변환 (+ sourcemap, 선언파일 생성 옵션 처리)
4. 빌드/번들단계(통합) : tsconfig, 프로젝트 레퍼런스에 따라 빌드 수행

 

1. 파싱(Parsing) 

tsc가 소스 코드를 파싱하여 구문 트리(CST) 및 AST를 생성한다.

이 단계에서 문법적 오류가 탐지된다. 

 

AST에는 각 노드의 위치, 토큰 유형, 자식 노드 정보가 포함되어 있으며,

이후에 심볼 테이블 구축과 제어흐름 분석의 입력으로 사용된다.

 

2. 타입 검사 (Type Checking)

타입스크립트의 핵심 부분이라고 볼 수 있다. AST위에서 동작하는 타입 체커는 심볼 테이블을 만들고, 표현식과 선언을 순회하며

타입 호환성을 판단한다.

 

3. 트랜스파일(Emit)

타입 검사 후 컴파일러는 트랜스파일 단계에서 타입 어노테이션(annotation)을 제거하고 대상 JS 버전으로 코드를 출력한다.

• 타깃(Target) : tsconfig.json의 target 옵션에 따라 문법 변환이 적용된다.
• 모듈시스템 : module 옵션에 따라 import, export 처리 방식이 결정된다
• source map : 디버깅을 위해 소스 맵(.map)을 생성하면, 브라우저/디버거에서 원본 TS 위치로 매핑이 가능하다.
• 선언 파일 생성 : 라이브러리의 경우, .d.ts를 함께 생성할 수 있다.

 

 

 

 

 

 

참고

참고자료링크