[TypeScript] TypeScript의 동작 원리 [5/25 study]

 

 

TypeScript의 동작 원리

 

 

프로그래밍 언어의 실행

대부분의 프로그래밍 언어는 컴퓨터 보다는 인간에게 더 친화적이고 영어에 가깝습니다. 그러므로 0과 1밖에 모르는 프로그램 코드를 컴퓨터가 해석하기 쉽게 변환해 주어야 합니다. 이런 작업을 ‘컴파일(Compile)’ 이라고 부릅니다. 코드를 컴파일 하여 컴퓨터가 이해하기 쉬운 형태로 바꿔주는 역할을 하는 프로그램을 ‘컴파일러’ 라고 부릅니다.

 

컴파일러는 우리가 작성한 코드를 AST(Abstract Syntax Tree, 추상 문법 트리)로 변환합니다. AST는 1차적으로 코드를 컴퓨터가 더 해석하기 쉽게 변경한 것 인데요. 공백이나 주석 탭 등 코드의 실행에 관계없는 요소들은 모두 제거하고 트리 형태의 자료구조에 코드를 분석해 저장한 형태를 말합니다. AST는 또 바이트코드(Bytecode)로 변환됩니다. 바이트 코드란 컴퓨터가 해석하고 실행 가능한 형태의 코드라고 이해하면 됩니다. 코드가 바이트코드로 변환(컴파일)되면 이제 컴퓨터가 바이트 코드를 실행해 프로그램이 실행됩니다.

정리하면 아래와 같습니다.

코드 → AST(추상 문법 트리)
AST → 바이트코드
바이트 코드 실행
이 과정을 컴파일(Compile)이라고 부르고, 과정을 진행하는 특수한 프로그램을 컴파일러(Compiler)라고 부릅니다.

타입스크립트는 어떻게 실행 될까?

타입스크립트 또한 컴파일 과정을 거칩니다. 그런데 컴파일 과정이 다른 주요 언어들과 조금 다릅니다. 아래는 타입스크립트 코드의 컴파일 과정입니다.

1. 타입스크립트 코드 → 타입스크립트 AST
2. 타입스크립트 AST 검사 (타입 검사)
3. 타입스크립트 AST → 자바스크립트 코드

1번 과정은 대부분의 프로그래밍 언어의 컴파일 과정과 동일합니다. 하지만 2번 과정에서 타입스크립트는 AST를 바이트 코드로 변환하는 대신 ‘타입 검사’를 수행합니다.

타입 검사란 우리가 작성한 코드에 타입 관련된 오류가 없는지 타입을 올바르게 사용했는지 검사하는 과정입니다. 코드를 실제로 실행해 오류가 있는지 검사하는게 아니므로 이 과정을 ‘정적 검사’ 라고 합니다. (반대로 실행해서 검사하는건 동적 검사 라고 함)

타입 검사가 실패하면 타입스크립트 컴파일러는 컴파일을 중단하고 오류가 발생 했음을 알립니다. 이렇듯 타입스크립트는 컴파일 과정에서 정적으로 코드에 오류가 없는지 검사하는 ‘타입 검사’ 과정을 거치기 때문에 코드를 실행하기 전에 프로그램에 발생한 오류를 확인할 수 있습니다. 이는 더 견고한 프로그램을 만드는데 큰 도움이 됩니다.

만약 코드에 아무런 타입 오류가 없어 타입 검사가 성공하면 타입스크립트 컴파일러는 타입스크립트 AST를 자바스크립트 코드로 변환합니다. 그리고 이렇게 변환된 자바스크립트 코드는 앞서 살펴본 대다수의 언어와 동일한 과정을 거쳐 실행됩니다.

1. 자바스크립트 코드 → AST
2. AST → 바이트 코드
3. 바이트 코드 실행
정리하자면 타입스크립트 코드는 다음 과정을 거쳐 실행됩니다.

- 타입스크립트 컴파일
    1. 타입스크립트 코드 → 타입스크립트 AST
    2. 타입 검사
    3. 타입스크립트 AST → 자바스크립트 코드

- 자바스크립트 컴파일 및 실행
    1. 자바스크립트 코드 → 자바스크립트 AST
    2. 자바스크립트 AST → 바이트 코드
    3. 바이트 코드 실행

타입스크립트 컴파일은 타입스크립트 컴파일러가 직접 수행하며, 그 결과 자바스크립트 코드가 생성됩니다.

결국 타입스크립트는 자바스크립트로 변환 되며 자바스크립트 코드를 실행하기 전에 타입 오류가 없는지 확인하기 위해 존재한다고 볼 수 있습니다.

타입스크립트 컴파일이 완료되어 만들어진 자바스크립트 코드는 우리가 이전에 실행 했던 방식 그대로 동일하게 실행하면 됩니다. 브라우저에서 실행할 수도 Node.js 같은 런타임에서 실행할 수도 있습니다.

 

 

참고자료
https://www.winterlood.com/post/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EA%B0%80%20%EA%B6%81%EA%B8%88%ED%95%98%EC%8B%A0%EA%B0%80%EC%9A%94

TypeScript가 궁금하신가요? - Winterlood