타입스크립트 동작 원리(Compile, Lexical/Syntax Analysis, Parser, AST, Transpiling, Interpreting)

1. 타입스크립트 코드 작성(.ts, .tsx)

// example.ts
const x: number = 42;
console.log(x+5);

2. 컴파일러 실행

• tsc 명령을 실행하면 타입스크립트 컴파일러가 동작하기 시작

$ tsc example.ts

* 컴파일(Compile) : 코드를 프로그램 형태로 동작시키기 위해 프로그램이 동작하는 환경에서 이해할 수 있는 언어나 바이너리 형태로 변환해주는 작업 (고수준 언어 → 기계어)

3. 어휘 분석(Lexical Analysis)

• 소스 코드를 토큰으로 분할
• 각 토큰은 의미있는 코드의 기본 단위(ex. 키워드, 식별자, 연산자, 리터럴 등)를 말함

4. 구문 분석(Syntax Analysis)

• 어휘 분석에서 생성된 토큰을 사용해 소스 코드의 문법적 구조를 분석
• 이 단계에서 *파서(Parser)는 토큰의 순서를 검사하고 문법 규칙에 맞는지 확인
• 구문 분석의 결과로 *추상 구문 트리(AST)를 생성

  * 파서(Parser) : 소스 코드의 구조를 분석하여 구문적으로 유효한지 확인하고, 이를 표현하기 위해 추상 구문 트리를 생성하는 프로그램 또는 프로그램의 구성 요소
  * 추상 구문 트리(AST, Abstract Syntax Tree) : 소스 코드의 문법 구조를 트리 형태로 표현한 자료 구조

ex. AST 표현 (간단화된 형태)

Program
├── VariableDeclaration
│   ├── kind: "const"
│   └── declarations
│       └── VariableDeclarator
│           ├── id: Identifier (name: "x")
│           ├── typeAnnotation: TypeAnnotation (type: "number")
│           └── init: Literal (value: 42)
└── ExpressionStatement
    └── CallExpression
        ├── callee: MemberExpression
        │   ├── object: Identifier (name: "console")
        │   └── property: Identifier (name: "log")
        └── arguments
            └── BinaryExpression
                ├── left: Identifier (name: "x")
                └── right: Literal (value: 5)

5. AST 기반으로 타입 체크(Type Checking)

• 타입 해석: 컴파일러는 코드에서 사용된 타입을 해석함
• 타입 검사: 변수, 함수, 클래스 등의 타입이 올바른지 검사
• 오류 보고: 타입이 맞지 않으면 오류를 보고함

6. 코드 변환(Transpile)

• 타입 체크가 완료되면 타입스크립트 코드를 자바스크립트 코드로 변환
• 변환된 자바스크립트 파일은 원본 타입스크립트 파일과 같은 기능을 하도록 보장됨

var x = 42;
console.log(x+5);

7. 번들링 및 최적화(Optional)

대규모 어플리케이션에서는 여러 자바스크립트 파일을 하나로 묶는 번들링 과정이 필요할 수 있음(webpack, .. 사용)

8. 자바스크립트 코드 실행(Interpreting)

• 트랜스파일된 자바스크립트 코드를 브라우저나 Node.js와 같은 자바스크립트 런타임 환경에서 실행
• 자바스크립트는 인터프리팅 방식으로 실행됨 → 자바스크립트 엔진이 자바스크립트 코드를 한 줄씩 읽고 실행