[타입스크립트 개론] 타입스크립트의 동작 원리

해당 게시글은

강의 사이트, 인프런에서 이정환님이 진행하시는

'한 입 크기로 잘라먹는 타입스크립트' 를

들어보며 블로그를 작성하려고 합니다.

다음 게시글 내용은 해당 강의에 핸드북의 내용으로

출처는 다음과 같습니다.

 

https://ts.winterlood.com/7250edd7-a3fd-4662-b756-f11f927c73f2

타입스크립트를 소개합니다 - 타입스크립트 개론

 

 

대다수의 프로그래밍 언어는 어떻게 동작할까?

타입스크립트 동작 방식을 정확히 이해하려면

대다수의 프로그래밍 언어들이 어떻게 동작하는지

그 원리를 살펴볼 필요가 있습니다.

 

먼저 대부분의 프로그래밍 언어는 사실 컴퓨터보단 인간에게 더 친화적입니다.

컴퓨터는 인간과는 달리 바이트코드나 기계어, 이진수 같은

아주 단순한 형태의 언어를 기반으로 동작합니다.

따라서 영어의 문법과 비슷한 프로그래밍 언어를

컴퓨터가 바로 이해하고 실행할 수는 없습니다.

 

그래서 컴퓨터는 우리가 작성한 코드를 실행하기 위해서

 이 코드를 해석하기 쉬운 형태로 변환하는데요.

이 과정을 '변환한다' 라고 해서 '컴파일' 이라고 부릅니다.

그래서 프로그래밍 언어로 작성한 코드를

컴파일하면 코드가 컴퓨터가 이해할 수 있는 기계어 같은 형태로 변환됩니다.

그럼 이제 컴퓨터가 그걸 읽어서 실행하고,

결과적으로 코드가 실행되는거죠.

 

그리고 이렇게 코드를 컴파일하는 것을

특별히 컴파일러라고 부릅니다.

자바나 자바스크립트같은 언어를 컴파일하면

바이트 코드라는 형식으로 변환됩니다.

때문에 설명 편의상 컴퓨터가 이해할 수 있는 형태의 코드를

바이트코드라고 부르겠습니다.

 

그런데 컴파일러는 어떤 과정을 거쳐

코드를 컴파일하는 걸까요?

 

우선 컴파일러는 작성한 코드를 바로 바이트코드로

변환하는 게 아니라 그 전에

AST(추상 문법 트리)라는

특별한 형태로 먼저 변환합니다.

 

다음 아래 그림처럼 코드의 공백이나 주석 탭 등의

코드 실행에 관계없는 그런 요소들은

전부 제거하고 트리 형태의 자로구조에

코드를 쪼개서 저장해 놓은 그런 형태를 의미합니다.

왼쪽의 자바스크립트 코드를

AST 추상 문법 트리로 변환하면

오른쪽 그림과 같이 바뀝니다.

 

이렇게 코드를 AST 로 변환하고 나면

이제 마지막으로 컴파일러가 AST 를

컴퓨터가 이해할 수 있는 형태인 바이트코드로 변환하고

컴파일이 종료됩니다.

 

그래서 우리의 코드가 실행되는 과정을 정리하면,

다음 세 단계의 과정을 거칩니다.

1. 코드를 컴파일러가 AST로 변환,

2. AST를 다시 바이트코드로 변환,

3. 변환된 바이트코드를 컴퓨터가 실행.

 

---

타입스크립트의 동작 과정

이번에는 타입스크립트는 어떤 과정을 거쳐

실행되는지 살펴보도록 하겠습니다.

우선 타입스크립트도 다른 언어와 마찬가지로

실행하려면 컴파일을 해야 하는데요.

 

1. 타입스크립트코드 → AST 로 변환

우선 다른 언어들과 동일하게

먼저 타입스크립트 코드를 AST로 변환합니다.

 

2. 타입 검사 후, AST → 자바스크립트 코드로 변환

그런데 그 다음 AST를 바이트코드로 변환하는 게 아니라

AST를 보고 코드 상에 타입 오류가 없는 검사하는

'타입 검사' 가 수행됩니다. 

만약 이때 코드를 잘못 작성해서 코드에 타입 오류가 있었다면,

타입 검사가 실패하고 컴파일이 중단됩니다.

vs

만약 타입 오류가 없는 정상적인 코드라면

타입 검사를 성공적으로 통과하고,

AST를 바이트코드가 아니라

'자바스크립트 코드' 로 변환합니다. 

정상적으로 변환되면 컴파일이 종료됩니다.

타입스크립트의 컴파일은 이렇게 진행됩니다.

대부분의 언어를 컴파일하면,

바이트코드가 만들어지는 것과는 다르게

vs

타입스크립트를 컴파일하면,

자바스크립트 코드가 만들어집니다.

 

이렇게 타입스크립트의 컴파일 결과로 만들어진

자바스크립트 코드를 Node.js 나 웹브라우저로 실행하면

앞서 살펴본 대다수의 언어들과 동일한 과정을 거쳐

컴파일 되어 실행됩니다.

여기서 중요하게 살펴봐야 할 부분은

타입스크립트 코드의 컴파일 과정에

타입 검사가 포함되어 있기 때문에

타입스크립트코드를 컴파일해서 생성한 자바스크립트 코드는

"타입 검사를 통과한 자바스크립트 코드"라는 거죠.

타입 오류가 발생할 가능성이 낮은

안전한 자바스크립트 코드라는 겁니다.

 

예를 들어서 아래 그림처럼

오류가 발생하고 있는 타입스크립트 코드는

컴파일 시 타입 검사를 통과할 수 없기 때문에

자바스크립트 코드로 변환되지 않아 실행할 수 없게 됩니다.

 

반면에 아래 그림처럼

타입 오류가 없는 타입스크립트 코드는

컴파일 시 타입 검사를 통과해서

타입 관련 문법들은

삭제된 안전한 자바스크립트 코드로 변경됩니다.

 

여기서 알 수 있는 또 다른 사실은

타입스크립트에 작성한 타입 관련 코드들은

결국 자바스크립트로 변환될 때 사라지게 되어

프로그램 실행에 영향을 미치지 않는다는 점입니다.

 

---

정리

정리하자면,

결국 타입스크립트는 타입 검사를 거쳐 자바스크립트 코드로 변환되는데

 이 과정에서 자바스크립트를 보다 더 안전하게 사용하기 위해 

미리 한 번 코드를 검사하는 용도로 사용된다고 볼 수 있습니다.