본문 바로가기

TypeScript

TypeScript 사용 이유와 동작 원리

JavaScript의 한계

  • 인터프리터 언어인 자바스크립트는 동적 타이핑언어이다.
  • 동적으로 타입이 변환되기때문에 변수의 자료형에 제한이 없다.
  • 자료형간의 연산의 경우 동적으로 타입이 변환되기 때문에 프로젝트의 규모가 커질 경우 의도하지 않은 에러가 발생할 수 있다.

 

TypeSrcript의 보완점

  • JavaScript의 SuperSet 언어로, 타입에 대한 문법을 제공한다.
  • JavaScript와 1:1 매칭되는 컴파일 언어이기때문에 JavaScript를 사용하는 곳이라면 TypeScript를 적용할 수 있다.
  • 정적 타이핑 언어로 변수의 타입을 코드 실행전에 결정한다.
  • 컴파일 시점에 타입체크를 진행하기때문에 런타임 이전의 논리적인 오류를 확인할 수 있다.

 

TypeScript의 이점

  • 인터페이스, 제네릭 등을 지원해 객체지향 프로그래밍에 도움을 준다.
  • 컴파일 단계에서 오류를 확인할 수 있다.
  • 코드를 통해 어떤 타입의 값이 필요한지 쉽게 파악할 수 있어 코드의 흐름을 이해하기 쉽다.
  • 따라서 협업에도 도움이 된다.

 

TypeScript의 동작 원리

순서

(타입스크립트 컴파일러) 타입스크립트 소스 -> 타입스크립트 추상 문법 트리(AST) -> 타입 검사 -> 자바스크립트 소스

(자바스크립트 엔진) -> 자바스크립트 추상 문법 트리(AST) -> 바이트 코드 -> 런타임에 바이트코드를 실행 및 평가

 

  • 타입스크립트의 컴파일은 타입스크립트 소스를 자바스크립트 소스로 변환하는 과정이다.
  • 타입검사시에 에러가 발생한다면 자바스크립트 코드가 생성되지 않는다.
  • 자바스크립트 소스를 실행하는 과정은 기존의 자바스크립트 코드를 작성하고 실행하는 과정과 같다.

 

* 추상 문법 트리(AST)

  • 코드를 컴퓨터가 해석하기 쉽게 변경한 것.
  • 공백이나 주석, 탭 등 코드의 실행에 관계 없는 요소를 모두 제거하고 트리 형태의 자료구조에 코드를 분석해 저장한 형태.

 

 

참조

https://www.winterlood.com/post/3dbba045-2d26-400f-b160-966816576972

https://velog.io/@ggob_2/typescript-2

https://jaeseokim.dev/Javascript/javascript_vs_typescript/

'TypeScript' 카테고리의 다른 글

TypeScript-React  (0) 2023.11.22
TypeScript  (0) 2023.11.21
typeScript 프로젝트 생성  (0) 2022.09.15
typeScript 기본 지식  (0) 2022.09.15