우아한 타입스크립트 6장 타입스크립트 컴파일

6.1 자바스크립트의 런타임과 타입스크립트의 컴파일

6.1.1 런타임과 컴파일 타임

• 프로그래밍언어는 일반적으로 고수준과 저수준 언어로 구분할 수 있다.
  • 고수준 언어 : 사람이 이해하기 쉬운 형식으로 작성
  • 저수준 언어 : 컴퓨터가 이해하기 쉬운 형식으로 작성
• 자바스크립트는 대표적인 고수준 언어에 속하며, 컴파일러나 인터프리터에 의해 저수준 프로그래밍 언어 (기계가 이해할 수 있는 언어)로 번역되어 실행된다.
• 개발자 소스코드 작성 -> 소스코드는 컴파일러에 의해 기계어 코드로 변환되어 실행이 가능한 프로그램이 된다. (컴파일 타임)
  • 컴파일 타임 : 소스코드가 컴파일 과정을 통해 컴퓨터가 인식할 수 있는 기계어 코드 (바이트 코드)로 변환되어 실행할 수 있는 프로그램이 되는 과정
• 소스코드 컴파일이 완료되면 메모리에 적재되어 실행된다. (런타임)
  • 런타임 : 컴파일 과정을 마친 응용 프로그램이 사용자에 의해 실행되는 과정

6.1.2 자바스크립트 런타임

• 자바스크립트 런타임은 자바스크립트가 실행되는 환경을 의미한다.
  • 크롬, 사파리나 인터넷 브라우저와 Node.js 등이 있다.
  • 다양한 구성 요소로 이루어져 있는데 주요 구성 요소로 자바스크립트 엔진, 웹 API, 콜백 큐, 이벤트 루프, 렌더 큐가 있다.
• 자바스크립트는 대표적인 인터프리터 언어로 별도 컴파일 과정이 존재하지 않는다고 알려져 있다.
  • 자바스크립트를 해석하고 실행하는 역할을 하는 V8 엔진은 때때로 자바스크립트 코드를 최적화하기 위해 컴파일 단계를 거친다.
  • 실행 속도를 향상하기 위한 목적으로 코드를 캐싱하여 이후 실행 시간을 단축한다.

6.1.3 타입스크립트의 컴파일

• 타입스크립트는 tsc라는 컴파일러를 통해 자바스크립트 코드로 변환된다.
• 하지만, 고수준 언어가 저수준 언어로 변환되는 것이 아니라 고수준 언어(타입스크립트)가 고수준 언어(자바스크립트)로 변환되는 것이기에 컴파일이 아닌 트랜스 파일(transpile)이라고 부르기도 한다.
• 소스코드를 다른 소스코드로 변환하는 것이기에 타입스크립트 컴파일러를 소스 대 소스 컴파일러라고 지칭하기도 한다.
• 타입스크립트는  ts 확장자가 붙은 파일을 찾아내서 컴파일한 후, .js 확장자가 붙은 자바스크립트 파일을 만들어낸다.
• 타입스크립트 컴파일러는 소스코드를 해석하여 AST(abstract syntax tree)를 만들고, 이후 타입 확인을 거친 다음에 결과 코드를 생성한다.

1. 타입스크립트 소스코드를 타입스크립트 AST로 만든다. (tsc)
2. 타입 검사기가 AST를 확인하여 타입을 확인한다. (tsc)
3. 타입스크립트 AST를 자바스크립트 소스로 변환한다. (tsc)
4. 자바스크립트 소스코드를 자바스크립트 AST로 만든다. (런타임)
5. AST가 바이트 코드로 변환된다. (런타임)
6. 런타임에서 바이트 코드가 평가되어 프로그램이 실행된다. (런타임)

• 타입스크립트의 타입은 1, 2 단계에서만 사용된다.
  • 개발자가 작성한 타입 정보는 단지 타입을 확인하는 데만 쓰이며, 최종적으로 만들어지는 프로그램에는 아무런 영향을 주지 않는다.

 

6.2 타입스크립트 컴파일러의 동작

6.2.1 코드 검사기로서의 타입스크립트 컴파일러

• 타입스크립트 컴파일러는 코드에 타입 오류가 없는지 확인한다.
• 타입스크립트는 정적으로 코드를 분석하여 에러를 검출하며, 코드를 실행하기 전에 자바스크립트 런타임에서 발생할 수 있는 에러를 사전에 알려준다.
• 자바스크립트에서는 런타임에 발생할 수 있는 에러를, 타입스크립트에서는 컴파일타임에 발견하여 실행과정에서 발생할 수 있는 문제를 방지한다.
• 타입 검사를 거쳐 코드를 안전하게 만든 이후, 타입스크립트 AST를 자바스크립트 코드로 변환한다.

6.2.2 코드 변환기로서의 타입스크립트 컴파일러

• 타입스크립트 컴파일러는 타입을 검사한 다음 자바스크립트로 트랜스파일한다.
  • 타입스크립트 소스코드는 브라우저와 같은 런타임에서 실행될 수 없고, 자바스크립트 코드로 변환해야 실행할 수 있게 된다.
• 타입스크립트 컴파일러는 타입 검사를 수행한 후 코드 변환을 시작하는데,
  • 이때, 타입 오류가 있더라도 일단 컴파일을 진행한다. 
  • 타입스크립트 코드가 자바스크립트 코드로 변환되는 과정은 타입 검사와 독립적으로 동작하기 때문이다.

타입스크립트 컴파일러의 역할은 크게 2가지로 생각할 수 있다.

1. 최신 버전의 타입스크립트 / 자바스크립트 코드를 구 버전의 자바스크립트로 트랜스파일한다.
2. 코드의 타입 오류를 검사한다.

6.3 타입스크립트 컴파일러 구조

• 타입스크립트 컴파일러는 다섯 단계를 거쳐 타입 검사와 자바스크립트 소스 변환을 진행한다.
  • 스캐너 : .ts 토큰화
  • 파서 : 토큰 기반 AST 생성
  • 바인더 : AST 노드 기반 심벌 생성
  • 체커 : AST + 심볼 기반 타입 검사
  • 이미터 : AST + 코드 검사 기반 .js 생성

6.3.1 프로그램

• 타입스크립트 컴파일러는 tsc 명령어로 실행된다.
• 컴파일러는 tsconfig.json 에 명시된 컴파일 옵션을 기반으로 컴파일을 수행한다.
• 먼저 전체적인 컴파일 과정을 관리하는 프로그램 객체(인스턴스)가 생성된다.
  • 프로그램 객체는 컴파일할 타입스크립트 소스 파일과 소스 파일 내에서 임포트 된 파일을 불러오는데, 가장 최초로 불러온 파일을 기준으로 컴파일 과정이 시작된다.

6.3.2 스캐너 (Scanner)

• 스캐너는 타입스크립트 소스 파일을 어휘적으로 분석하여 토큰을 생성하는 역할을 한다.
  • 소스코드를 작은 단위로 나누어 의미 있는 토큰으로 변환하는 작업을 수행한다.
• 최소 단위의 토큰 리스트
  • https://github.com/microsoft/TypeScript/blob/main/src/compiler/types.ts#L38

TypeScript/src/compiler/types.ts at main · microsoft/TypeScript

6.3.3 파서 (Parser)

• 스캐너가 소스 파일을 토큰으로 나누면 파서는 토큰 정보를 이용하여 AST를 생성한다.
  • AST는 컴파일러가 동작하는 데 핵심 기반이 되는 자료 구조
  • 소스 코드의 구조를 트리 형태로 표현
  • 최상위 노드는 타입스크립트 소스 파일이며, 최하위 노드는 파일의 끝 지점으로 구성된다.
• 스캐너는 어휘적 분석을 통해 토큰 단위로 소스코드를 나누지만 파서는 생성된 토큰을 기반으로 구문적 분석을 수행한다.
  • 코드의 실질적인 구조를 노드 단위의 트리 형태로 표현
  • 각각의 노드는 코드상의 위치, 구문 종류, 코드 내용과 같은 정보를 담고 있다.

6.3.4 바인더 (Binder)

• 바인더의 주요 역할은 체커 단계에서 타입 검사를 할 수 있도록 기반을 마련하는 것이다.
  • 타입 검사를 위해 심볼이라는 데이터 구조를 생성한다.
  • 심볼은 이전 단계의 AST에서 선언된 타입의 노드 정보를 저장한다.
• 심볼 인터페이스
  • https://github.com/microsoft/TypeScript/blob/main/src/compiler/types.ts#L5982

TypeScript/src/compiler/types.ts at main · microsoft/TypeScript

• flags 필드는 AST 에서 선언된 타입의 노드 정보를 저장하는 식별자이다. 심볼을 구분하는 식별자 목록은 다음과 같다.
  • https://github.com/microsoft/TypeScript/blob/main/src/compiler/types.ts#L5887

TypeScript/src/compiler/types.ts at main · microsoft/TypeScript

6.3.5 체커 (Checker)와 이미터(Emitter)

• 체커는 파서가 생성한 AST와 바인더가 생성한 심볼을 활용하여 타입 검사를 수행한다.
• AST의 노드를 탐색하면서 심볼 정보를 불러와 주어진 소스 파일에 대해 타입 검사를 진행한다.
• 체커의 타입 검사는 다음 컴파일 단계인 이미터에서 실행된다.
• 타입 검증하고 타입 에러에 대한 정보를 보여줄 에러 메시지를 저장한다.

 

• 이미터는 타입스크립트 소스 파일을 변환하는 역할을 한다.
• 즉, 타입스크립트 소스를 자바스크립트 파일과 타입 선언 파일 (d.ts)로 생성한다.
• 타입스크립트 소스 파일 변환 과정에서 개발자가 설정한 타입스크립트 설정 파일을 읽어오고, 체커를 통해 코드에 대한 타입 검증 정보를 가져온다. 그리고 타입스크립트 소스 변환을 진행한다.

타입스크립트의 컴파일 과정을 정리하면,

1. tsc 명령어를 실행하여 프로그램 객체가 컴파일 과정을 시작한다.
2. 스캐너는 소스 파일을 토큰 단위로 분리한다.
3. 파서는 토큰을 이용하여 AST를 생성한다.
4. 바인더는 AST의 각 노드에 대응하는 심벌을 생성한다. 심벌은 선언된 타입의 노드 정보를 담고 있다.
5. 체커는 AST를 탐색하면서 심벌 정보를 활용하여 타입 검사를 수행한다.
6. 타입 검사 결과 에러가 없다면 이미터를 사용해서 자바스크립트 소스 파일로 변환한다.