[TypeScript] TypeScript 실행 과정과 브라우저의 역할

00. TL;DR

TypeScript는 직접 실행되지 않고 JavaScript로 변환(Transpile)된 후 실행됩니다.

1. TypeScript 컴파일 단계
   • TypeScript 코드를 작성하면 AST(추상 구문 트리)가 생성됨
   • 타입 검사(Type Checking) 수행
   • 타입 정보를 제거한 JavaScript 코드로 변환됨 (.js 파일 생성)
2. 브라우저(JavaScript 엔진) 실행 단계
   • JavaScript 파일을 파싱하고 AST 생성
   • 바이트코드 변환 및 최적화 수행 (JIT Compilation)
   • 실행 (인터프리터 및 최적화된 머신 코드로 처리) 

---

01. 개요

TypeScript와 JavaScript는 실행 과정이 다릅니다.
이 문서에서는 TypeScript의 컴파일 과정과 브라우저(JavaScript 엔진)의 실행 과정을 단계별로 정리합니다.

---

02. TypeScript 실행 과정 (컴파일 단계)

TypeScript는 실행되기 전에 JavaScript로 변환됩니다.

이 과정에서 타입 검사가 수행되며, 최종적으로 JavaScript 파일이 생성됩니다.

02.01. TypeScript의 주요 역할

1. TypeScript 코드 작성 (.ts 파일 생성)
2. 추상 구문 트리(AST) 생성 (파싱)
3. 타입 검사 (Type Checking)
4. JavaScript 파일 생성 (Transpilation) (.js 파일로 변환)

02.01.01. 예제: TypeScript 코드

const greeting: string = "Hello, world!";
console.log(greeting);

02.01.02. TypeScript 변환 후(JavaScript 코드)

const greeting = "Hello, world!";
console.log(greeting);

(타입 정보가 제거되고 순수 JavaScript 코드만 남습니다.)

---

03. 브라우저 (또는 Node.js)의 실행 과정

TypeScript가 변환한 JavaScript 파일이 브라우저에서 실행되기까지의 과정은 다음과 같습니다.

03.01. 브라우저(JavaScript 엔진)의 주요 역할

1. JavaScript 코드 인터프리트: 파싱 & AST 생성
2. 바이트코드 생성: JIT Compilation
3. 실행: 인터프리터 + 최적화된 머신 코드 처리

이 과정은 V8 엔진(Chrome, Node.js), SpiderMonkey(Firefox), JavaScriptCore(Safari) 같은 JavaScript 엔진에서 수행됩니다.

---

04. 전체 흐름

• TypeScript 역할:
  1. TypeScript 코드 작성
  2. 추상 구문 트리(AST) 생성
  3. 타입 검사
  4. JavaScript 파일 생성 (트랜스파일)
• 브라우저 역할:
  5. JavaScript 코드 인터프리트 (파싱 & AST 생성)
  6. 바이트코드 생성 (JIT Compilation)
  7. 실행 (인터프리터 + 최적화된 머신 코드 처리)