언어/타입스크립트

TypeScript 사용 이유와 컴파일 과정

realtrynna 2022. 11. 3. 20:05

TypeScript 사용 이유

타입스크립트를 사용하면 왜 두 번 다시 자바스크립트로 돌아갈 수 없는지에 대해 포스팅한다.

백이나 프론트나 자바스크립트 관련 채용 공고를 조금만 보아도 자바스크립트를 메인으로 사용하는 회사는 거의 없다. 올해 초 개발 공부 시작 당시 타입스크립트가 우대사항인 기업들이 있었는데 요즘은 우대가 아닌 필수다.

 

특징

1.정적 타입의 컴파일 언어

인터프리터 언어인 자바스크립트와 다르게 타입스크립트는 컴파일 언어이다. 컴파일이란 타입스크립트 코드를 자바스크립트 코드로 변환되는 과정을 의미한다. 자바스크립트는 런타임 단계 즉 노드나 브라우저를 통해 코드를 실행을 해봐야 에러가 있는지 없는지 알 수 있다. 반면 타입스크립트는 컴파일 단계 즉 코드 작성 단계에서 에러를 감지할 수 있다.

 

2.객체 지향 프로그래밍 지원

최신 문법(ES6)을 포함하며 모듈, 클래스, 상속, 인터페이스 등 객체 지향 프로그래밍을 하기 위한 패턴을 제공한다.

 

사용 이유

타입스크립트의 단점으로 코드 작성 시 변수마다 자료형을 지정하므로 코드량이 증가한다. 또한 프로젝트 규모가 커질 시 용량이 증가해 컴파일의 상당한 시간이 소요된다. 하지만 이러한 단점을 상쇄할 만한 명확한 이유가 존재한다.

 

1. 코드 탐색과 디버깅 

코드에 목적(타입)을 작성하고 목적에 맞지 않다면 실행 전 단계에서 에러가 발생한다. 이로 인해 개발자가 예상하지 않은 예외 케이스의 발생을 최소화시킬 수 있으며 에디터(VS CODE)에서 실시간 제공하는 피드백과 제안 사항을 통해 높은 생산성을 보여준다. 타입스크립트 개발 환경으로만 놓고 보면 유료 에디터인 Web Storm보다 VS CODE가 더 편리한 부분이 많다고 제로초님이 말씀하셨다!

 

2. 자바스크립트 호환

타입스크립트는 자바스크립트의 Super Set이다. 자바스크립트 문법에 타입스크립트 문법이 추가 어떠한 프로젝트던 동일한 용도로 사용할 수 있다.

 

3. 커뮤니티

자바스크립트의 NPM 생태계는 따로 설명할 필요 없이 매우 방대하다. 자바스크립트 생태계가 곧 타입스크립트 생태계이며 타입스크립트와 호환되는 라이브러리의 지원도 점점 늘어나고 있다.

 

 

 

컴파일 과정

노드와 브라우저는 자바스크립트 코드만을 실행할 수 있다. 그러므로 타입스크립트는 별도의 컴파일 과정이 필요한데 어렵게 생각할 필요없다. 타입스크립트 코드를 컴파일러를 통해 자바스크립트 코드로 변환시킨다. 이렇게 변환된 자바스크립트 코드를 우리가 익숙한 노드나 브라우저에서 실행시키면 된다.

 

  1. 타입스크립트 코드는 컴파일러(tsc)를 통해 타입스크립트 AST 코드로 변환됨.
  2. 타입 체크기는 변환된 타입스크립트 AST 코드의 타입을 검사함.
  3. 자바스크립트 코드로 변환됨.
  4. 자바스크립트 코드는 자바스크립트 AST 코드로 변환됨.
  5. 변환된 자바스크립트 AST 코드는 바이트 코드로 변환됨.
  6. 변환된 바이트 코드를 런타임 환경에서 실행.

 

> AST(Abstract Syntax Tree) 추상 구문 트리로 컴파일에 많이 사용되는 자료 구조의 일종이며 컴파일러 구문 분석 단계의 결과물이다. 컴파일러가 요구하는 여러 단계를 통해 프로그램 중간 표현 역할을 하며 컴파일러의 결과물에 매우 큰 영향을 준다.

 

 

 

참고 자료

https://norwayy.tistory.com/400

https://www.Typescriptlang.org/

https://serokell.io/blog/why-Typescript

https://ko.wikipedia.org/wiki/%EC%B6%94%EC%83%81_%EA%B5%AC%EB%AC%B8_%ED%8A%B8%EB%A6%AC

'언어 > 타입스크립트' 카테고리의 다른 글

TypeScript 인터페이스와 타입의 차이  (0) 2022.11.17
TypeScript any unknown  (0) 2022.11.12
TypeScript const assertion  (0) 2022.11.01
TypeScript 유틸리티 타입  (0) 2022.05.29
TypeScript 타입 가드  (0) 2022.05.28