[TypeScript] 타입스크립트 동작 원리 복습

 

안녕하세요, 성조입니다.

오늘은 간단하게 타입스크립트 동작 원리에 대해 정리하는 포스트를 작성해보려 해요.

예전에 배웠는데 이번에 정리 복습하는 시간을 가져봤어요.

---

 

TypeScript란?

TypeScript는 실행 전 단계에서 타입을 체크하여 런타임 에러가 나오는 것인지 아닌지를 판별하는 정적 타입 언어이다.

JavaScript

 

 

 

TypeScript 컴파일러(TSC)의  동작 원리

타입스크립트는 컴파일 후 .js 코드로 변환하는 것까지 한 사이클을 보여준다.

 

 

1. 스캐너

스크립트 파일이 실행되면서 가장 먼저 진행되는 영역으로 작성한 코드 문자열을 의미 있는 최소 단위인 토큰(Token) 단위로 쪼개는 작업이다. 즉, const a = 1; 이라는 코드가 있다면 이 코드를 토큰화 하면 'const', 'a', '=', '1', ';'라는 토큰들로 분리시키는 과정이다.

 

2. 파서

스캐너로 토큰화 한 값들을 AST(Abstract Syntax Tree, 추상 구문 트리)라는 트리를 생성한다. 이것이 문법적으로 어떤 관계를 계층적으로 표현하는 지도와 같은 것으로 문자열, 숫자 값 등 처리하는 것들을 판별한다 보면 된다.

 

3.  바인더

토큰 값을 -> AST라는 구문 트리로 전환했다면 코드 내의 식별자(변수, 함수 등)어디 위치에 어떤 범위(Scope)를 가졌는지 정보를 수집하고 이 과정을 심볼(Symbol)이라는 명칭으로 정의한다. 이 값은 타입 체킹 단계의 근거로 어떤 위치에 값들이 있는지 존재 여부를 판별할 수 있는 것의 근거가 된다.

 

4. 체커

이전 단계에서 생성한 AST와 심볼 테이블을 비교해서 코드 내에 작성한 타입이 실제 값과 일치하는 것인지를 검사하는 단계이다.

예를 들면 숫자 데이터가 들어오기로 약속 된 타입 영역에 문자열 데이터가 들어와있어서 에러가 발생되는 지점을 찾아서 넘겨주는 원리와 같다. 타입스크립트가 동작되며 전체 컴파일 시간의 많은 시간을 가져간다.

 

 

5. 이미터

타입 체크에 이상이 없는 경우 자바스크립트 파일과 선언 파일을 생성하여 연동하고 검증에서 생성했던 타입스크립트의 타입과 구문값들은 삭제 정리된다.

 

[생략 된 정의 설명]

- 구조적 타이핑(Structural Typing)이란 개념을 알아가는 것도 도움되며, 이 과정에 필요한 덕타이밍도 같이 확인하면 도움된다.

- 타입 소거(Type Erasure) -> 컴파일 후 런타임으로 넘겨줄 때 타입 추가 데이터들은 제거한다.

 

타입스크립트의 동작 원리를 이해하면 에러 시점을 파악하는 컴파일 레벨의 에러인지 파악 후 런타임 레벨로 보내주면서 프로그램 구성을 잡아준다.

 

핵심만 보면 이렇게 된다.(디테일하게는 레이어까지 다 잡기에 디테일을 학습하는 것이 목표가 아니기에 해당 문제는 부분 생략한다.)

TypeScript(컴파일) -> 타입 소거 -> JavaScript(런타임)

 

---

오탈자나 문제가 되는 게 있으면 댓글로 공유주시면 감사드립니다.

다음 포스트에서 뵙겠습니다.