[TypeScript] TypeScript 컴파일러(tsc)의 컴파일 과정

 

 

   목차 

1. "tsc"란?
2. tsc 컴파일 과정
3. 컴파일러 옵션

 

tsc의 컴파일 과정에 대해서 알아보자!

 

 

 

---

 

 

 

 

 

 

 

 

 1. "tsc란?" 

 

tsc는 TypeScript Compiler의 약자로, TypeScript 코드를 JavaScript로 변환하는 명령줄 도구이다.
tsc는 TypeScript 코드를 JavaScript로 변환하는 과정을 수행한다.
이 과정에서 타입 검사를 통해 코드의 오류를 잡고, 다양한 옵션을 사용해 최종 JavaScript 코드가 어떻게 생성될지 제어할 수 있다.
tsc는 필요 시 트랜스파일링을 통해 최신 JavaScript 기능을 구형 브라우저에서도 호환되게 변환하는 역할도 한다.

 

 

---

 

 2. tsc의 컴파일 과정 

 

 

 1) 입력 파일 분석 

 

컴파일러는 컴파일 대상 파일을 확인한다. 컴파일 파일을 결정하는 방법에는 여러 가지가 있다.

- 직접 명시 : 명령어로 파일을 직접 명시할 수 있다. (ex) tsc myfile.ts)

- tsconfig.json 사용 : 프로젝트에서 여러 파일을 컴파일할 경우, 파일 목록을 tsconfig.json 파일에 정의한다.

- 파일 경로 자동 감지 : 설정에 따라 include나 exclude로 지정된 디렉토리의 파일들을 자동으로 포함할 수 있다.

 

 

 

 2) 구성 파일(tsconfig.json) 로드 

 

tsconfig.json은 TypeScript 프로젝트의 컴파일 옵션을 설정하는 파일이다. 여기에는 컴파일러의 동작 방식을 제어하는 다양한 설정이 포함된다.

- 컴파일 옵션 : target, module, lib, strict 등의 옵션으로 컴파일 결과를 조정한다.
ex) target: "ES6"로 설정하면 ES6 표준을 목표로 JavaScript로 트랜스파일된다.

- 파일 포함/제외 : include, exclude 속성을 사용해 어떤 파일을 컴파일할지 결정한다.
ex)  exclude: ["node_modules"]는 node_modules 디렉터리 내의 파일을 제외한다.

 

 

 

 3) 타입 검사(Type Checking) 

 

타입스크립트의 핵심 기능 중 하나인 타입 검사 과정이다. 이 단계에서는 TypeScript 컴파일러가 코드 내에서 타입 관련 오류를 잡는다.

- 타입 추론 : 타입이 명시적으로 선언되지 않았을 경우, 컴파일러는 타입을 추론한다.

- 타입 호환성 검사 : 할당, 함수 호출, 객체의 속성 접근 등에서 타입이 올바르게 사용되었는지 확인한다.
ex) string 타입 변수에 number 값을 할당하려고 하면 오류가 발생한다.

- 정적 분석 : 컴파일러는 코드가 실행되기 전 단계에서 타입 검사를 통해 논리적 오류를 찾아낸다.

 

이 단계에서 발견된 오류는 컴파일을 멈추고 메시지를 출력할 수 있다.
하지만, 설정에 따라 에러가 있더라도 자바스크립트 파일이 생성되기도 한다. (noEmitOnError 옵션으로 제어)

 

 

 

 4) AST(Abstract Syntax Tree) 생성 

 

타입 검사를 완료하면, 컴파일러는 입력된 TypeScript 코드를 추상 구문 트리(AST)로 변환한다.
AST는 코드의 구조를 트리 형태로 나타낸 것이다.
AST는 컴파일러가 코드를 분석하고 변환하는 데 사용된다.

 

예를 들어, let x: number = 10;이라는 코드는 다음과 같은 구조를 가질 수 있다.

VariableStatement (변수 선언)

    VariableDeclaration (변수 이름 및 타입)  :  x, number

    Initializer (초기값) : 10

 

 

 

 5) 트랜스파일링(Transpiling) 

 

트랜스파일링은 TypeScript 코드를 JavaScript 코드로 변환하는 단계이다.
이 단계에서 입력된 TypeScript 코드를 목표하는 JavaScript 표준에 맞게 변환한다.

 

타겟 버전 설정: tsconfig.json에서 설정한 target 옵션에 따라 JavaScript의 버전이 결정된다.

예를 들어, target: "ES5"로 설정하면 ES6의 화살표 함수가 일반 함수로 변환된다.

const add = (a: number, b: number): number => a + b;
// ES5로 변환 시
var add = function (a, b) {
    return a + b;
};

 

 

 

 6) 파일 생성 (Emit) 

 

트랜스파일된 JavaScript 파일을 디스크에 저장하는 단계이다.
일반적으로 TypeScript 파일(.ts)은 JavaScript 파일(.js)로 변환되며, 경우에 따라 타입 선언 파일(.d.ts)이나 소스 맵 파일(.map.js)도 생성된다.

- JavaScript 파일 생성 : 트랜스파일된 자바스크립트 파일이 지정된 출력 경로에 생성된다. (ex. dist 폴더에 모든 .js 파일 저장)

- 타입 선언 파일 생성 : declaration: true 설정 시 .d.ts 파일이 생성되어, 다른 TypeScript 파일에서 해당 모듈의 타입 정보를 사용할 수 있다.

- 소스 맵 생성 : 디버깅을 위해 소스 맵 파일(.map.js)이 생성될 수 있다. 이는 브라우저에서 JavaScript 코드가 TypeScript 원본과 매핑될 수 있게 도와준다.

 

 

 

 7) 최종 출력 

 

이 과정을 거쳐 TypeScript는 최종적으로 JavaScript 파일을 생성한다.
이때 컴파일러는 오류가 발생하지 않았다면 tsconfig.json에 설정된 옵션에 따라 결과물을 출력하며, 개발자는 브라우저나 Node.js 환경에서 이 파일을 실행할 수 있다.

 

 

---

 

 

 3. 컴파일러 옵션 

 

tsc는 다양한 옵션을 제공하여 컴파일 과정을 제어할 수 있다. 주요 옵션은 다음과 같다.

--target: JavaScript의 버전을 설정 (ES5, ES6, ES2017 등)

--module: 모듈 시스템을 설정 (commonjs, esnext 등)

--strict: 엄격한 타입 검사를 활성화

--declaration: 타입 선언 파일(.d.ts)을 생성

--sourceMap: 소스 맵 파일을 생성

 

이와 같은 옵션을 통해 컴파일러 동작을 세밀하게 조정할 수 있다.