TypeScript의 동작 원리

타입스크립트의 동작 원리

타입스크립트는 자바스크립트에 '타입'을 부여한 언어를 의미한다. 컴파일 언어이자, 정적인 타입의 타입스크립트가 어떤 원리로 동작되는지 알아보자.

 

1. 타입스크립트 코드를 작성한다.

2. 작성된 타입스크립트 코드는 '타입스크립트 컴파일러(tsc)'를 통해 파싱되어 '타입스크립트 AST 코드'로 변환된다.

3. '타입 검사기(Typechecker)'를 통해 파싱된 '타입스크립트 AST 코드'의 타입을 체크한다.

4. 타입스크립트 AST 코드를 '자바스크립트 코드'로 변환한다.

--- 해당 과정까지는 '타입스크립트 컴파일러(tsc)'에 의해 수행된다 ---

5. 자바스크립트 코드를 '자바스크립트 AST 코드'로 파싱한다.

6. 자바스크립트 AST 코드를 '바이트 코드'로 변환한다.

7. 런타임 실행환경에서 바이트 코드를 실행한다.

--- 해당 과정까지는 '자바스크립트 런타임(js 엔진, node.js)'에 의해 수행된다 ---

 

요약하자면,

타입스크립트 코드 -> 자바스크립트 코드 -> (타입스크립트 컴파일러로 파싱) 자바스크립트 AST 코드 -> (타입 검사기로 체크) 자바스크립트 코드 -> (파싱) 자바스크립트 AST 코드 -> 바이트 코드 -> (런타임) 코드 실행

위와 같은 과정을 통해 타입스크립트가 동작된다.

 

참고 개념

1. AST(Abstract Syntax tree) : 추상화 문법 트리

프로그래밍 언어(고급언어)를 컴파일러를 통해 파싱하여 AST의 자료 구조형태의 코드로 만든다.

(소스코드를 AST로 만드는 과정 참고 사이트 : https://ts-ast-viewer.com/# ]

 

2. 컴파일러(Compiler)

프로그래밍 언어(고급언어)를 컴퓨터가 이해할 수 있는 기계어로 변환시키는 과정

ex. 소스코드 -> 바이너리 코드로 변환

 

3. 인터프리터(Interpreter)

프로그래밍 언어(고급언어)를 컴파일 변환 없이 바로 사용하는 언어

ex. 자바스크립트

 

4. 트랜스파일러(Transpiler)

한 언어로 작성된 소스코드를 비슷한 수준의 추상화를 지닌 다른 언어로 변환하는 것

ex. 바벨(ES6+ 코드를 ES5로 트랜스파일한다), 타입스크립트(타입 + 자바스크립트 -> 자바스크립트)