TypeScript의 동작 원리

 

TypeScript의 동작 원리는 주로 컴파일러(tsc)와 관련된 몇 가지 핵심 단계로 설명할 수 있습니다. 이 과정에서 TypeScript 코드는 JavaScript로 변환되고, 정적 타입 검사가 수행됩니다. 아래에 TypeScript의 동작 원리를 단계별로 설명하겠습니다.

 

 

1. 작성 단계 (Authoring)

TypeScript는 .ts 또는 .tsx 확장자를 사용하는 파일로 작성됩니다. 이 파일은 JavaScript와 거의 동일한 구문을 사용하지만, 추가적으로 타입 주석(type annotations)을 포함할 수 있습니다.

// example.ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}

const user: string = "World";
console.log(greet(user));

 

 

2. 컴파일 단계 (Compilation)

TypeScript 코드를 실행 가능하게 만들기 위해 컴파일러(tsc)가 사용됩니다. 컴파일러는 TypeScript 코드를 JavaScript 코드로 변환합니다. 이 과정에서 타입 검사도 수행됩니다.

tsc example.ts

2.1 타입 검사 (Type Checking)

컴파일러는 코드에서 타입 오류를 검사합니다. 타입 오류가 있으면 컴파일러는 경고 메시지를 표시합니다.

function add(a: number, b: number): number {
  return a + b;
}

add(5, "10"); // 컴파일 타임에 오류 발생

위 코드에서 add 함수는 두 개의 숫자를 인수로 받아야 하지만, 문자열을 전달했기 때문에 오류가 발생합니다.

2.2 트랜스파일링 (Transpiling)

타입 검사가 완료된 후, TypeScript 코드는 JavaScript로 변환됩니다. 이 JavaScript 코드는 TypeScript의 설정에 따라 다양한 버전(ES5, ES6 등)으로 출력될 수 있습니다.

 

 

3. 설정 파일 (tsconfig.json)

TypeScript 프로젝트는 tsconfig.json 파일을 사용하여 컴파일러 옵션을 설정할 수 있습니다. 이 파일은 컴파일러가 어떤 파일을 처리할지, 어떤 JavaScript 버전으로 변환할지 등의 정보를 포함합니다.

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

 

4. 실행 단계 (Execution)

컴파일된 JavaScript 파일은 표준 JavaScript로 변환되었기 때문에, Node.js 또는 브라우저와 같은 JavaScript 런타임 환경에서 실행될 수 있습니다.

node example.js

 

 

5. 타입 선언 파일 (Declaration Files)

TypeScript는 *.d.ts 파일을 사용하여 타입 정보를 외부 JavaScript 라이브러리나 모듈에 제공할 수 있습니다. 이는 TypeScript 코드가 JavaScript 라이브러리와 원활하게 통합될 수 있도록 도와줍니다.

// math.d.ts
declare module "math" {
  export function add(a: number, b: number): number;
}

// main.ts
import { add } from "math";
console.log(add(2, 3));

 

 

요약

TypeScript는 정적 타입 검사와 트랜스파일링 과정을 통해 안정성과 유지보수성을 높이는 JavaScript의 상위 집합입니다. 주요 동작 원리는 다음과 같습니다:

1. TypeScript 코드 작성 (.ts 파일).
2. tsc 컴파일러를 사용한 타입 검사 및 트랜스파일링.
3. tsconfig.json을 통한 컴파일러 설정.
4. 컴파일된 JavaScript 코드 실행.
5. *.d.ts 파일을 통한 타입 선언 및 외부 라이브러리 통합.

이 과정을 통해 TypeScript는 개발자가 더 안전하고 신뢰할 수 있는 코드를 작성할 수 있도록 도와줍니다.