[TypeScript] TypeScript 컴파일 과정

개요

• TypeScript와 JavaScript를 비교하면서 TypeScript는 어떤 식으로 컴파일 과정을 거치는지 알아보겠습니다.

TypeScript vs JavaScript

• 우선 Typescript와 Javascript는 컴파일언어, 인터프리터 언어라는 차이가 있습니다.
• Typescript는 컴파일 언어, Javascript는 인터프리터 언어입니다.

컴파일 언어 : 소스코드 전체를 한 번에 검사해서 실행 프로그램으로 만들어주는 언어
인터프리터 언어 : 소스코드를 한줄한줄 읽어가며 실행하는 언어

TypeScript의 실행과정

1. Typescript코드 작성
2. Typescript코드를 TSC가 추상 구문 트리(AST)라는 것으로 변환을 합니다.
   • 이 과정에서 공백, 주석 등 불필요한 정보들은 제거가 됩니다.
3. 타입 검사기가 Typescript코드의 타입들이 정상적으로 작성됐는지 안정성 검사를 진행합니다.
4. 타입이 안정적으로 작성됐으면 Typescript AST가 Javascript코드로 변환됩니다.
5. 변환된 Javascript코드가 다시 Javascript AST로 변환됩니다.
6. 이후 Javascript AST가 바이트코드로 변환된 후 프로그램이 실행되는 과정을 거칩니다.

코드로 알아보기

소스코드

// src/tscTest.ts

const test:string = "test"
console.log(test)

명령어로 컴파일해보기

• Typescript 컴파일러인 tsc를 이용해 1, 2, 3, 4 과정을 수행해봅니다.

$ tsc src/tscTest.ts

컴파일 결과1

$ cat src/tscTest.js

컴파일 결과 코드

 

컴파일 실패 예시

• 이번엔 타입을 이상하게 명시해서 tsc컴파일 과정에서 에러가 발생하는 경우를 살펴보겠습니다.

// number타입에 "test"라는 문자열을 할당했습니다.

const test:number = "test"
console.log(test)

$ tsc src/tscTest.ts

컴파일 실패

• 타입 안정성 검사과정에서 실패하여 컴파일 에러가 발생한 것을 볼 수 있습니다.

마무리

지금까지 Typescript의 컴파일 과정을 살펴봤습니다. 추후 AST에 대해서도 포스팅해보겠습니다.