타입스크립트의 동작 원리

Frontend

프로그래밍 언어의 동작 방식

컴파일

사람이 작성한 프로그래밍 언어를 컴퓨터가 이해할 수 있는 기계어로 변환하는 과정을 컴파일이라고 한다.

 

자바스크립트 컴파일 과정

자바스크립트는 다음과 같은 단계를 거쳐 컴파일 된다.

1. AST(추상 문법 트리) 변환

컴파일러는 자바스크립트 코드를 AST(Abstract Syntax Tree)로 변환한다.

AST는 코드 실행과 관계없는 요소들(공백, 주석, 탭 등)을 제거하고, 코드를 트리 형태의 자료구조로 쪼개서 저장한 형태이다.

2. 바이트 코드 변환

그 다음, AST를 컴퓨터가 실행할 수 있는 바이트 코드로 변환한다.

 

타입스크립트의 동작 과정

타입스크립트는 자바스크립트에 타입 검사 단계가 추가된 형태이다.

  1. 타입스크립트 코드를 AST로 변환
  2. AST를 분석하여 타입 검사 수행
  3. 타입 오류가 있으면 컴파일 중단
  4. 타입 검사 통과 시 자바스크립트 코드로 변환

 

타입스크립트는 결국 자바스크립트로 변환되는 것이고,

타입 관련 코드는 변환 과정에서 제거되기 때문에 프로그램 실행에 영향을 미치지 않는다.

 

즉, 타입스크립트는 자바스크립트를 더 안전하게 사용하기 위한 코드 검사 도구인 셈이다.

 

'Frontend' 카테고리의 다른 글

Zustand로 전역 상태 관리하기  (0) 2025.11.18
aria-label과 텍스트 콘텐츠  (0) 2025.11.13
웹 애플리케이션의 렌더링 방식과 Next.js  (0) 2025.11.08
타입스크립트 유틸리티 타입  (0) 2025.11.05
타입스크립트 타입 시스템: 계층과 호환성  (0) 2025.10.31
'Frontend' 카테고리의 다른 글
  • aria-label과 텍스트 콘텐츠
  • 웹 애플리케이션의 렌더링 방식과 Next.js
  • 타입스크립트 유틸리티 타입
  • 타입스크립트 타입 시스템: 계층과 호환성
고견
고견
개발 자국 남기기
  • 고견
    개발자국
    고견
  • 전체
    오늘
    어제
    • 분류 전체보기 (157) N
      • Frontend (29)
        • Next.js (16)
        • JavaScript (7)
      • CS (19) N
        • 자료구조 (9)
        • 알고리즘 (5)
        • 운영체제 (4)
        • 네트워크 (1) N
      • TIL (93)
      • Dev Log (16)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    클래스
    제네릭
    emotion diary
    자료구조
    배열
    cs50
    Next.js
    문자열
    앱 라우터
    App Router
    Trouble Shooting
    algorithm
    알고리즘
    인터페이스
    react
    함수 타입
    javascript
    바닐라 자바스크립트
    generic
    타입 좁히기
    typescript
    트러블 슈팅
    CS
    페이지 라우터
    C
    Spa
    useState
    ai 감성 일기장
    Pages Router
    memory
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.5
고견
타입스크립트의 동작 원리
상단으로

티스토리툴바