TypeScript 동작원리

이번 포스팅의 내용은 이정환 강사님의 한 입 크기로 떠먹는 타입스크립트 강의를 참고했습니다.

 

또한, TypeScript 동작원리를 알기 전에 TS를 사용하는 이유를 먼저 읽어보셔도 이해하시는 데 도움이 될 것 같습니다.

https://mungyun.tistory.com/6

TypeScript를 사용하는 이유

 

 

💡 용어 정리

포스팅 중 등장하는 용어들의 개념을 먼저 정리하겠습니다. 

• 컴파일: 고급 언어로 작성된 코드를 컴퓨터가 이해할 수 있는 저급 언어(기계어) 또는 다른 형태의 중간 언어로 변환하는 과정
• 컴파일러: 컴파일을 하는 친구
• TSC(TypeScript Compiler): 타입스크립트(TypeScript) 코드를 자바스크립트(JavaScript)로 변환하는 컴파일러
• 바이트 코드: 고급 언어로 작성된 코드를 컴파일한 후에 생성되는 중간 코드
• 추상 문법 트리(AST): 소스 코드를 구조화하여 트리 형태로 표현한 자료 구조. 코드를 파싱(구문 분석)한 후 생성되며, 프로그래밍 언어의 구문을 계층적으로 나타냄. 이 트리는 프로그램의 구조를 나타내는 중요한 중간 표현 형태로, 컴파일러나 인터프리터가 코드를 이해하고 변환하는 데 중요한 역할을 함.

 

 

👊 인터프리터 언어 vs 컴파일러 언어

 

프로그래밍 언어의 동작 원리를 알려면 우선 인터프리어 언어와 컴파일러 언어에 대해 알 필요가 있습니다.

1. 인터프리터 언어의 동작 원리

인터프리터 언어(Interpreted Language)는 소스 코드를 한 줄씩 읽어 실행하는 방식입니다. 이 방식에서는 전체 코드를 기계어로 변환하는 대신, 실행 시점에 코드가 해석되고 즉시 실행됩니다.

 

 

🏳️ 동작 과정

1. 소스 코드 작성: 개발자는 고수준 프로그래밍 언어로 프로그램을 작성합니다.
2. 인터프리터가 소스 코드 실행: 인터프리터는 코드를 한 줄씩 읽고, 해당 줄의 구문을 해석한 뒤 즉시 실행합니다. 소스 코드가 중간 언어나 기계어로 변환되지 않고 직접 해석되기 때문에 실행 중에 오류를 발견할 수 있습니다.
3. 실행 결과: 코드가 바로 실행되어 결과가 즉시 출력됩니다.

 

🏳️ 예시

 

파이썬(Python), 자바스크립트(JavaScript), PHP 등이 대표적인 인터프리터 언어입니다.

x = 10 
y = 20 
print(x + y)

 

이 코드는 파이썬 인터프리터에 의해 한 줄씩 읽혀 해석되고, 각 명령이 실행되며 결과를 출력합니다.

 

 

🏳️ 장점

• 즉시 실행: 코드를 수정하고 바로 실행할 수 있어 빠른 테스트와 디버깅이 가능합니다.
• 이식성: 다양한 플랫폼에서 인터프리터만 설치되어 있으면 프로그램이 실행될 수 있습니다.

 

🏳️ 단점

• 느린 실행 속도: 소스 코드를 한 줄씩 해석하고 실행하기 때문에 컴파일된 언어보다 속도가 느립니다.
• 런타임 오류: 코드를 실행하는 도중에 오류가 발생할 수 있습니다. 전체 프로그램을 실행하기 전에 모든 오류를 발견하기 어렵습니다.

 

2. 컴파일러 언어의 동작 원리

컴파일러 언어(Compiled Language)는 소스 코드를 사전에 전체적으로 기계어 또는 바이트코드로 변환하여 실행하는 방식입니다. 이때 변환된 기계어 코드는 운영체제나 하드웨어에서 바로 실행될 수 있습니다.

 

 

🏳️ 동작 과정

1. 소스 코드 작성: 개발자가 고수준 프로그래밍 언어로 코드를 작성합니다.
2. 컴파일 단계: 컴파일러가 소스 코드를 한 번에 분석하고, 기계어 또는 중간 언어(예: 바이트코드)로 변환합니다. 이 과정에서 문법 오류와 타입 오류 등을 검사합니다.
3. 실행 파일 생성: 컴파일러가 생성한 기계어 코드를 포함한 실행 파일이 생성됩니다.
4. 프로그램 실행: 생성된 실행 파일은 독립적으로 실행되며, 이 과정에서 추가적인 해석 없이 빠르게 실행됩니다.

 

🏳️ 예시

• C, C++, 자바(Java), 고(Golang) 등이 컴파일러 언어의 예입니다.

int main() { 
int x = 10; int y = 20; 
printf("%d", x + y); 
return 0; }

 

이 코드는 컴파일러에 의해 컴파일되고, 실행 파일이 생성됩니다. 이후 해당 파일은 독립적으로 실행됩니다.

 

 

🏳️ 장점

• 빠른 실행 속도: 미리 컴파일된 기계어 코드로 실행되기 때문에 인터프리터 언어보다 실행 속도가 빠릅니다.
• 사전 오류 발견: 컴파일 시점에 모든 문법 오류와 타입 오류를 잡아내기 때문에, 실행 중에 발생하는 오류가 줄어듭니다.

 

🏳️ 단점

• 컴파일 시간 소요: 소스 코드를 작성한 후 실행하기 전에 컴파일하는 시간이 필요합니다.
• 이식성 제한: 기계어로 컴파일된 코드가 특정 하드웨어나 운영체제에 종속적일 수 있습니다. (단, 자바 같은 경우 JVM을 사용하여 플랫폼 독립성을 유지합니다.)

 

🔨 주요 차이점 비교

	인터프리터 언어	컴파일러 언어
실행 방식	한 줄씩 해석하여 즉시 실행	전체 소스 코드를 기계어로 변환 후 실행
실행 속도	느림	빠름
오류 처리	실행 중에 오류를 발견 (런타임 오류)	컴파일 시에 대부분의 오류 발견
코드 수정 후 실행	즉시 실행 가능	컴파일 과정을 거쳐야 실행 가능
이식성	인터프리터만 있으면 어떤 플랫폼에서든 실행 가능	플랫폼에 종속적일 수 있음 (자바는 JVM을 사용하여 이식성 유지)

 

🔗 결론

• 인터프리터 언어는 개발 속도가 빠르고 테스트 및 디버깅이 쉬운 반면, 실행 속도가 느리고 런타임 오류가 발생할 수 있습니다.
• 컴파일러 언어는 실행 속도가 빠르고 더 안전한 코드 실행을 보장하지만, 컴파일 단계가 추가되며 플랫폼에 종속적일 수 있습니다.

 

📌 대부분 프로그래밍 언어의 동작 원리 

(출처: 한 입 크기로 잘라 먹는 타입스크립트)

 

대부분의 프로그래밍 언어는 코드를 AST로 변환하는 과정을 거칩니다. 하지만 이 다음 과정에서 인터프리터 언어와 컴파일 언어의 차이점이 드러납니다. 

인터프리터 언어는 AST를 생성하고 그 트리를 해석하면서 실행하는 반면, 컴파일러 언어는 AST를 생성한 후, 기계어 또는 바이트코드로 변환하여 최종 실행 파일을 만듭니다. 

 

📌 타입스크립트의 동작 원리 

(출처: 한 입 크기로 잘라 먹는 타입스크립트)

 

 

타입스크립트는 컴파일러 언어로서, 소스 코드를 컴파일하여 자바스크립트로 변환하는 과정을 거칩니다.  소스 코드 작성 -> 파싱 및 AST 생성 -> 타입 체크 -> 트랜스파일링 -> 출력 파일 생성의 과정을 거쳐, 자바스크립트로 변환된 결과를 제공합니다. 이 과정에서 정적 타입 검사를 통해 코드의 오류를 사전에 잡아내고, 자바스크립트로 변환된 코드를 최종 실행할 수 있게 합니다. 구체적인 동작 원리를 알아보겠습니다. 

 

1. 소스 코드 작성

개발자는 .ts 확장자를 가진 파일에 타입스크립트로 코드를 작성합니다. 타입스크립트는 자바스크립트에 정적 타입을 추가한 언어로, 타입 정의와 관련된 다양한 기능을 제공합니다.

 

2. 타입스크립트 컴파일러(TSC) 실행

tsc 명령어를 사용하거나, IDE/편집기의 빌드 시스템을 통해 타입스크립트 컴파일러를 호출합니다. 이 과정에서 컴파일러는 타입스크립트 파일을 처리합니다.

 

3. 파싱 및 AST 생성

컴파일러는 타입스크립트 소스 코드를 파싱하여 추상 문법 트리(Abstract Syntax Tree, AST)를 생성합니다. AST는 코드의 구조를 트리 형태로 표현한 것입니다.

 

4. 타입 체크

AST를 기반으로 타입스크립트 컴파일러는 타입 체크를 수행합니다. 변수, 함수, 객체 등 코드의 각 부분이 정의된 타입과 일치하는지 검사합니다. 타입 오류가 발견되면, 컴파일러는 오류 메시지를 출력하여 개발자가 수정할 수 있도록 안내합니다.

 

5. 트랜스파일링

타입 체크가 완료되면, 타입스크립트 컴파일러는 AST를 바탕으로 타입스크립트 코드를 자바스크립트로 변환합니다. 이 과정에서 타입 정보는 제거되며, 자바스크립트 문법으로 변환됩니다.

 

6. 출력 파일 생성

변환된 자바스크립트 코드를 포함한 .js 파일이 생성됩니다. 이 파일은 브라우저나 Node.js에서 실행할 수 있습니다.

 

7. 결과 실행

생성된 자바스크립트 파일은 브라우저나 Node.js 환경에서 실행됩니다. 타입스크립트 컴파일러가 생성한 자바스크립트 코드는 타입 검사와는 관계없이 동작합니다.

 

📚 결론

 

타입스크립트는 자바스크립트의 강력한 상위 집합으로, 정적 타입 검사를 통해 코드의 안정성과 품질을 향상시키는 데 중점을 둡니다. 이번 포스팅에서는 타입스크립트의 동작 원리를 살펴보았으며, 이를 통해 타입스크립트가 어떻게 소스 코드를 자바스크립트로 변환하고, 정적 타입 검사를 통해 오류를 사전에 방지하는지를 이해할 수 있었습니다.