TypeScript의 동작 원리

Updated: 2025-03-27

typescriptweekly
cover image

TypeScript의 동작 원리

먼저 TypeScript를 처음 배우게 되면 JavaScript로 변환되고 실행된다라는걸 먼저 배우게 됩니다.

그 이유는 브라우저나 Node.js는 TypeScript 코드를 직접 실행할 수 없기때문에 TypeScript 코드를 JavaScript로 변환하는 과정이 필요합니다.

그러면 더 자세히 변화는 과정을 설명하겠습니다.

TypeScript 컴파일러 (tsc)

TypeScript 코드를 JavaScript로 변환하는 핵심 도구는 바로 TypeScript 컴파일러(tsc)입니다. tsc는 TypeScript 코드를 분석하고, 타입 정보를 제거한 후 JavaScript 코드로 변환하는 역할을 합니다.

TypeScript 컴파일러의 역할

TypeScript 컴파일러는 단순히 코드를 변환하는 것 외에도 다음과 같은 중요한 역할을 수행합니다.

  • 타입 오류 감지:

    코드 작성 단계에서 타입 오류를 미리 발견하여 런타임 오류를 줄여줍니다.

  • 코드 최적화:

    일부 코드 최적화를 수행하여 생성된 JavaScript 코드의 성능을 향상시킬 수 있습니다.

  • 다양한 JavaScript 버전 지원:

    ECMAScript 버전을 지정하여 다양한 JavaScript 런타임 환경에서 실행 가능한 코드를 생성할 수 있습니다.

동작 과정

image.png

TypeScript 동작 과정은 크게 다음과 같은 단계로 이루어집니다.

  1. 개발자가 타입스크립트 코드로 작성을 한다. 작성한 타입스크립트 코드는 **타입스크립트 컴파일러(tsc)**를 통해 파싱하여 타입스크립트 AST 코드로 변환된다.
  2. **타입 검사기(Typechecker)**를 통하여 파싱 된 타입스크립트 AST 코드의 타입을 체크한다.
  3. 타입스크립트 AST의 코드를 자바스크립트 코드로 변환한다.

해당 과정까지는 '타입스크립트 컴파일러(tsc)'에 의해 수행이 된다.

  1. 자바스크립트 코드를 자바스크립트 AST 코드로 파싱한다.
  2. 자바스크립트 AST를 바이트 코드로 변환된다.
  3. 런타임(runtime)이라는 실행환경에서 바이트 코드를 실행한다.

해당 과정까지는 '**자바스크립트 런타임(js 엔진, node.js)'**에 의해 수행이 된다.

결론

TypeScript 컴파일러는 TypeScript 코드를 JavaScript로 변환하는 핵심 도구이며, 코드의 안정성을 높이고 개발 생산성을 향상시키는 데 중요한 역할을 합니다.

문의 사항이 있으시면 언제든지 개인 메일로 연락 주시기 바랍니다.

메일 보내기

© 2024. kimyoungho all rights reserved.