Frontend/TS

TS - TypeScript란 ?

Creative_Lee 2022. 7. 14. 14:35

1. TypeScript란?

동적 타입 언어인 JavaScript단점을 보완하기 위해 

JavaScript 기반으로 만들어진 정적 타입 언어이다! (자바스크립트의 슈퍼셋)


1-1. JavaScript의 단점

자바스크립트는 런타임에서 타입이 결정되는 동적 타입 언어이다.

개발자는 값의 종류, 즉 타입을 선언하지 않아도 되고

컴파일 과정이 없기 때문에 이런 부분이 장점이 되기도 한다.

 

하지만 이런 특징 때문에

개발자가 예상치 못한 에러가 발생하면 런타임에서야 오류를 발견할 수 있기 때문에

최악의 경우, 이미 프로그램이 멈춘 뒤일 것이다.

프로그램 사용자는 에러를 마주치고 이미 떠났다.

 

타입 안정성이 보장되지 않기 때문에 (프로그램에서 타입이 잘못 전달되어 발생되는 에러를 잡기 어려움)

프로젝트가 커질수록 디버깅이 어렵다.

 

이렇게  자바스크립트의 단점을 보완하기 위해

타입스크립트가 탄생하게 되었다.


2. TypeScript의 특징

타입 스크립트는 정적 타입 언어이다.

코드 작성 단계에서 부터 타입을 체크하고 오류를 확인할 수 있다.

ES6의 문법을 포함하고 있고 클래스, 인터페이스, 상속, 모듈 같은 객체지향 프로그래밍 패턴을 제공한다.


3. TypeScript의 장점

1. 변수나 함수에서 개발자의 목적에 맞지 않는 타입에 대한 에러를 발생시켜 버그를 미연에  방지합니다!

2. 코드 자동 완성, 피드백 제공을 통해 작업과 동시에 디버깅이 가능합니다!

3. 대부분의 라이브러리들이 타입스크립트를 지원하고, VSC 같은 에디터에서 타입스크립트 관련 플러그인을 제공합니다.

4. 자바스크립트 프로젝트에 대한 점진적 마이그레이션을 지원합니다!


4. TypeScript의 단점

1. 개발의 규모가 커질수록 타입을 설정하는 시간이 오래걸립니다.

2. 코드의 가독성이 떨어질 수 있습니다.


5. TypeScript의 컴파일 과정

 

타입스크립트 코드 --> 타입스크립트 AST --> 타입 체커가 AST 체크 --> 자바스크립트 코드로 변경

--------------------------   여기까지 타입스크립트 컴파일러(tsc)에 의해 수행  ---------------------------------

 

자바스크립트 코드 --> 자바스크립트 AST --> 바이트 코드 --> 런타임이 바이트코드 평가 후 결과 반환

-------------------------   여기까지 자바스크립트 런타임(V8, node.js)에 의해 수행  -------------------------

 

 

* 자바스크립트 컴파일러와 런타임(node.js)은 엔진(V8)이라는 하나의 프로그램으로 합쳐진다.
   현대 모던 엔진은 자바스크립트를 인터프리터 방식으로 실행하고,

   필요하다면 컴파일도 한다.

 

   이렇게 인터프리팅과 컴파일을 혼합하여 사용하는 것을

   JIT( Just-In-Time ) 컴파일러 라고 한다.

 

 때문에 현 시점에서의 JS는 컴파일되지만, 문맥상 인터프리터 언어로 분류된다.


5-1. 컴파일 vs 인터프리터

* 컴파일 언어 ( C, C++, Java 등)

 - 코드 실행에 앞서 코드를 기계 언어로 미리 바꿔둔다. 때문에 런타임에서 빠르게 동작한다.

 - 컴파일 시간은 소요되지만, 그 과정에서 Syntax, Type error를 감지한다.

 

* 인터프리터 언어 ( JavaScript, Python 등)

 - 실행과 동시에 한 줄씩 중간 언어로 해석한뒤 실행한다.

 - 컴파일 과정 없이 고수준 프로그래밍 언어를 바로 실행시킬 수 있다.

 - 변경사항을 빠르게 테스트 하기에 용이.


5-2. 용어 설명

*AST( Abstract Syntax Tree )

 - 프로그래밍 언어로 작성된 소스 코드의 추상 구문 구조 트리이다.

 - 트리의 각 노드는 소스 코드에서 발생되는 구조를 나타낸다.

 

* 컴파일( compile ) 

 - 큰 의미로 한 언어로 작성된 코드를 다른 언어의 코드로 변환하는 것

 - 일반적으로 소스 코드를 바이트 코드로 변환하는 것

 

* 트랜스파일 ( transpile )

 - 한 언어로 작성된 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것.

 - 컴파일의 하위 개념

 - ex) Babel -  es6+ 코드를 es5로 트랜스 파일


6. tsc는 컴파일러지만 트랜스 파일을 한다...?

말이 조금씩 다르기는 하지만 주류가 되는 의견은 다음과 같다.

컴파일은 일반적으로 소스 코드를 바이트 코드로 변환하는 작업을 의미하므로,
.ts 파일을 .js 파일로 변환 시키는 타입스크립트 컴파일러는 
실질적으로 트랜스 파일 하는 것이다.

 

(컴파일의 큰 의미에 속하기 때문에 TS의 컴파일 과정이라 부르면서도, '세부적으로 나누면 트랜스 파일이 맞지 않느냐'

라는 의견인 듯 합니다.)

 

 

 

 

운동하고 싶다

 

'Frontend > TS' 카테고리의 다른 글

TS - Class  (0) 2022.07.18
TS - 제네릭(generic)  (0) 2022.07.15
TS - Function Overloading  (0) 2022.07.15
TS - Call Signatures  (0) 2022.07.14
TS - 새로운 타입과 기본 문법  (0) 2022.07.14