TypeScript 동작 원리

soma·2024년 5월 21일

TypeScript

목록 보기

2/4

`TypeScript` 동작 원리

타입스크립트 코드를 실행하려면 웹 브라우저나 Node.js와 같은 런타임 환경에서 TypeScript 코드를 JavaScript로 변환해야 하는데, 이 작업은 TypeScript 컴파일러(TSC)를 사용하여 수행된다.

💡 TS 코드 ⭢ AST ⭢ 타입 검사 ⭢ JS 코드 ⭢ AST ⭢ 바이트 코드 ⭢ 실행

1. TS 코드 ⭢ AST

TypScript 코드를 분석해 AST(Abstract Syntax Tree, 추상 문법 트리)로 변환한다.
AST는 코드의 문법 구조를 트리 형태로 표현한 것으로, 코드의 구조와 의미를 이해하는 데 사용된다.

2. 타입검사

AST를 기반으로 TSC는 타입 검사를 수행한다.
이 과정에서 변수, 함수 매개변수, 반환 값 등에 대한 타입을 확인하고 일치하지 않는 경우 오류를 발생시킨다.

3. JS 코드 생성

타입 검사를 성공적으로 완료하면 TSC는 타입 정보를 제거하고 JavaScript 코드를 생성한다.
이때 TypeScript의 고급 기능이나 타입 관련 코드는 JavaScript 코드에서 제거된다.

// ts
let a: string = "1";
a.toUpperCase();

// js
let a = "1";
a.toUpperCase();

4. JS코드 ⭢ AST

생성된 JavaScript 코드를 다시 AST로 변환한다.

5. 바이트 코드 생성

AST를 기반으로 JavaScript 엔진이 실행할 수 있는 형태의 바이트 코드를 생성한다.

6. 실행

생성된 바이트 코드가 실행되어 원하는 동작이 수행된다.

이러한 과정을 통해 TypeScript는 타입 안정성을 유지하면서 JavaScript와 동일한 환경에서 코드를 실행할 수 있도록 지원한다.

TypeScript 프로젝트 설정 및 실행 가이드

// 1. 폴더 생성 및 해당 폴더로 이동
$ mkdir [폴더명]
$ cd [폴더명]

// 2. Node.js 패키지 초기화
$ npm init

// 3. Node.js 타입 추가
$ npm i @types/node

// 4. TSC 설치 및 버전 확인
$ npm i [--save-dev] -g typescript
$ tsc -v

// 5. index.ts 파일 생성
console.log("Hello, TypeScript!");
const a: number = 1;

// 6-1. tsc로 컴파일하고 실행하기
$ tsc src/index.ts
$ node src/index.js

// 6-2. TSX(TypeScript Execute)로 실행하기
$ npm i -g tsx
$ tsx src/index.ts

// 컴파일러 옵션 자동 생성 및 설정
$ tsc --init

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext", // JS 코드 버전 설정
    "module": "ESNext", // JS 코드 모듈 시스템 설정
    "outDir": "dist",   // 컴파일 결과 생성할 JS 파일 위치 설정
    "strict": true,     // 엄격한 타입 검사 여부 설정
    "moduleDetection": "force"   // 모든 TS 파일에 export 추가해 로컬 모듈(독립 모듈)로 취급
  },
  "include": ["src"]    // TSC로 컴파일 할 TS 파일의 범위 설정
}

컴파일과 트랜스파일

컴파일 (compile)

고급 프로그래밍 언어를 컴퓨터가 이해할 수 있는 기계어로 변환하는 것을 의미한다.

컴파일러의 컴파일 과정
- 코드 ⭢ AST(추상 문법 트리) ⭢ 바이트 코드
타입스크립트의 컴파일 과정
- TS 코드 ⭢ AST ⭢ 타입 검사 ⭢ JS 코드 ⭢ AST ⭢ 바이트 코드
  타입스크립트 컴파일러(TSC)를 사용하여 타입스크립트 코드를 자바스크립트 코드로 변환한다. 이때, 타입 체크와 같은 추가적인 작업이 수행된다.