TypeScript란?

youtu.be/fO5fO-gelfA

한 번씩 보면 참 재밌는 니콜라스 유튜브다.

한 마디로 TypeScript는 JavaScript의 Superset이다.

이정도만 알아도 아하~! 할텐데 조금 더 자세히 설명하자면 자바스크립트는 현재 크게 3가지 종류로 나눌 수 있다.
(ES5까지 / ES6 이후 / TypeScript) 이유는... ES5에서 ES6로 넘어오면서 많이 바뀌었다고... 따라서 ES6부터 ESNext라고 부르기도 한다.

뭐... 사실 그냥 그림으로 보는게 가장 이해가 쉽고 빠르다. 관계를 설명하자면... 

자바스크립트의 공식 표준(ECMAScript)은 2015년부터 다음과 같이 명명한다. ECMAScript 2015, ECMAScript 2019... 또한 이를 줄여서
ECMAScript 2015 = ES2015 = ES6와 같이 부른다.

TypeScript는 마이크로소프트가 개발과 유지보수를 하고 있으며, 페이스북이 React, 구글이 Angular, 알리바바가 Vue를 지원하고 있다.

기존의 자바스크립트에서는 타입이 명시되지 않아 협업을 하거나 큰 프로젝트를 하기 어려웠기 때문에 타입스크립트를 사용하는 목적이 가장 크다고 한다.

 

하지만 코드가 돌아가는 것은 하위 호환을 위해서 ESNext는 Babel이라는 트랜스파일러(transpiler)를 거쳐 ES5 자바스크립트 코드로 변환되고, TypeScript도 마찬가지로 TSC(TypeScript compiler)라는 트랜스파일러를 통해 ES5 자바스크립트 코드로 변환된다.

 

타입스크립트는 ES6(ESNext)의 문법을 대부분 지원한다.
따라서 ES5까지의 자바스크립트와는 다른 문법적 특징을 갖는다.

1. 비구조화 할당(destructuring assignment)

2. 화살표 함수(arrow function)

3. 클래스(class)

4. 모듈(module)

5. 생성기(generator)

6. Promise와 async/await 구문

 

 

참고 : 

트랜스파일러(transpiler) : 소스코드 -> 소스코드

컴파일러(compiler) : 소스코드 -> 바이너리 코드

 

Tag. babel, tsc, typescript compiler, es5, es6, es2015, es2019, typescript, promise, async, await, async/await, generator, iterator, arrow function, destructuring assignment