타입스크립트란 무엇인가?

세 종류의 자바스크립트

자바스크립트는 현재 세 가지 종류가 있다. 웹 브라우저에서 동자갛는 표준 자바스크립트인 ES5(ECMAScript 5)와 2015년부터 매년 새로운 버전을 발표하는 ESNext, 그리고 ESNext에 타입(type) 기능을 추가한 타입스크리트(TypeScript)이다.

다음 그림은 ES5, ESNext, 타입스크립트 간의 관계를 보여준다.

ES5와 (ES6)ESNext, 타입스크립트의 관계도

ESNext는 ES5의 모든 문법을 포함하고, 타입스크립트는 ESNext의 모든 문법을 포함한다. 따라서 타입스크립트로 개발했더라도 타입 기능을 사용하지 않는다면 ESNext 소스나 마찬가지이다.

 

*ESNext 자바스크립트란?

자바스크립트의 공식 표준은 ECMAScript(줄여서 ES)이다. 2009년 발표된 ES5 버전이 있었는데 2015년에 발표된 ES6 버전에서 큰 변화가 있었다. 그래서 ES6 이후 버전을 통틀어 가리킬 때는 '새로운 자바스크립트'라는 뜻에서 'ESNext'라고 한다.

그리고 2015년에 ECMAScript 공식 버전 표기법이 바뀌었다. ES6부터는 발표 연도를 붙여 'ECMAScript 2015(줄여서 ES2015)'처럼 부르기 시작했다. 또한, 1년 주기로 새로운 버전을 발표하기로 해서 2019년 말 현재 ECMAScript 2019까지 나왔다. 

 

타입스크립는 누가 만들었나?

타입스크립트는 마이크로소프트가 개발하고 유지하고 있는 오픈소스 프로그래밍 언어로 2012년 말 처음 발표되었다. 타입스크립트는 C# 언어를 창시한 하일스베르(Anders Hejlsberg)가 핵심 개발자로 참여하고 있다. 구글의 Angular.js 팀이 앵귤러(Angular) 버전 2를 만들면서 타입스크립트를 채택한 이후부터 널리 알려졌다. 요즘은 앵귤러의 경쟁 상대인 리액트(React.js)나 뷰(Vue.js)조차도 타입스크립트를 사용해 개발되고 있다.

 

자바스크립트에 타입 기능이 있으면 좋은 이유

오늘날 소프트웨어는 상당히 복잡하므로 보통 여러 사람이나 팀이 협력해 하나의 제품을 개발한다. 그런데 이런 상황에선느 항상 코드를 작성한 쪽과 사용하는 쪽 사이에 커뮤니케이션이 중요하다. 예를 들어, A라는 개발자가 다음과 같은 코드를 만들었다고 가정해보자.

function makePerson(name, age) {}

B라는 개발자가 이 코드를 이용하려고 다음 코드를 만들어 실행했을 때 오류가 발생했다면, B 개발자는 오류의 원인이 무엇인지 찾기가 어렵다.

makePerson(32, "Jack")

그런데 처음 코드를 다음처럼 타입스크립트의 타입 기능을 이용해 구현했다면 이러한 문제는 발생하지 않았을 것이다.

function makePerson(name: string, age: number) {}

그리고 타입스크립트 컴파일러는 다음 화면처럼 문제의 원인이 어디에 있는지 친절하게 알려주므로 코드를 좀 더 수월하게 작성할 수 있다.

오류의 원인을 알려주는 타입스크립트 컴파일러

이 때문에 개발자들은 대규모 소프트웨어를 개발할 때 자바스크립트보다 타입스크립트를 선호하게 되었다.

 

트랜스파일

ESNext 자바스크립트 소스코드는 바벨(Babel)이라는 트랜스파일러(transpiler)를 거치면 ES5 자바스크립트 코드로 변환된다. 바벨과 유사하게 타입스크립트 소스코드는 TSC(TypeScript compiler)라는 트랜스파일러를 통해 ES5 자바스크립트 코드로 변환된다.

여기서 트랜스파일러란, 어떤 프로그래밍 언어로 작성된 소스코드를 또 다른 프로그래밍 언어로 된 소스코드로 바꿔주는 프로그램을 말한다. 트랜스파일러는 텍스트로 된 소스코드를 바이너리 코드로 바꿔주는 컴파일러(compiler)와 구분하기 위해 생긴 용어이다.

*트랜스파일과 컴파일은 '무언인가를 또 다른 무엇으로 바꿔준다'는 관점에서는 크게 차이가 없으므로, 요즘은 둘을 크게 구분하지 않는 경향이 있다. 따라서 이 책에서는 트랜스파일이라는 용어보다는 컴파일이라는 용어를 주로 사용한다.

 

출처: <Do it! 타입스크립트 프로그래밍> 이지스퍼블리싱