TypeScript란?

자바스크립트의 종류

자바스크립트의 종류? 자바스크립트에도 종류가 있었나?

현재 자바 스크립트는 크게 세 가지 종류가 있다. 그 중 타입 스크립트는 아래 그림에서도 볼 수 있듯이 Javascript의 상위 확장 개념이다. 아래 그림을 조금을 부연 설명하자면, 웹 브라우저에서 동작하는 표준 자바스크립트인 ES5(ECMAScript 5)와 2015년 많은 변화를 가져온 ES6를 포함해 매년 새로운 버전을 발표하는 ESNext, 그리고 ESNext에 Type 기능을 추가한 타입 스크립트가 생기게 된 것이다.

자바스크립트의 공식 표준은 ECMAScript(줄여서 ES)이다. 2009년 발표된 ES5 버전 이후 2015년 발표된 ES6에서 큰 변화가 있었다. (let & const, arrow function, default parameter, multi-line string, promise & async/await 등이 추가되었으며 흔히 모던자바스크립트라고 부름) ES6이후의 버전을 ESNext라고 하지만, 워낙 ES6에서의 변화가 커서 아래의 그림에 별도로 표시 해봤다. 자세한 내용은 아래의 포스팅을 확인해보자.

2022.04.16 - [Programming/Type Script] - Typescript 문법 찍먹하듯 훑어보기

 

자바스크립트의 종류 및 관계

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

 

타입스크립트는 누가 만들었을까?

타입스크립트는 마이크로소프트가 개발하고 유지하고 있는 오픈소스 프로그래밍 언어로 2012년 말 처음 발표됐다. 타입스크립트는 C# 언어를 창시한 안데르스 하일스베르(Anders Hejlsberg)가 핵심 개발자로 참여하고 있다. 요즘 제일 많이 쓰고 있다고 해도 과언이 아닌 React.js나, Vue.js도 타입스크립트를 사용해 개발되고 있다.

 

자바스크립트에 타입이 필요한 이유

최근들어서 출시하는 소프트웨어들 중 상당수는 상당한 복잡도를 지니고 있어 보통 여러 사람들이나 팀원들이 협력해 하나의 제품을 개발하는 추세이다. 이런 프로젝트일수록 커뮤니케이션은 매우 중요하며, 개발자들의 경우 코드로 커뮤니케이션을 한다고 할 정도로 코드 작성에 신중해야 하는데, 이런 상황에서 여러명이 코드를 다룰 때 아래와 같은 상황이 발생할 수 있다.

 

아래는 name과 age를 parameter로 받아 사용자를 추가하는 함수이다.

const addUSer = (name, age) => {}

 

협업하는 동료가 내가 만들어놓은 함수를 사용하는데 아래와 같이 코드를 사용하여 오류가 발생했을 때, 동료는 오류의 원인을 찾는데 시간이 소비된다.

addUser(99, "Soopiri")

 

그런데 아래와 같이 타입 스크립트의 기능을 이용해 구현했다면, 이런 문제는 발생하지 않을 수 있다.

const addUser = (name:string, age: number) => {}

 

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

const addUser = (name:string, age:number) => {
    console.log('user added')
}

addUser(99, "soopiri")

/*
>> error log in console
Argument of type 'number' is not assignable to parameter of type 'string'.
'name' is declared but its value is never read.
'age' is declared but its value is never read.
*/

이렇듯 타입스크립트는 정적 타입을 지원하기 때문에 컴파일 단계에서 오류를 포착할 수 있다는 장점이 있다. 명시적인 정적 타입을 지정하는 것은 개발자의 의도를 명확하게 코드로 알 수 있고, 이러한 점은 코드의 가독성을 높히고 예측할 수 있게 하며 무엇보다 디버깅을 쉽게 할 수 있다.

 

위의 이유가 가장 큰 핵심이기도 하지만, 다른 이유도 몇 가지 확인하고 넘어가자.

 

우선 IDE(통합개발환경)을 포함한 다양한 도구의 지원을 받을 수 있다. IDE에 타입 정보를 저공함으로써 높은 수준의 Intellisense나, 타입 체크 리팩토링등의 지원을 받을 수 있으며 이는 대규모 프로젝트를 위한 필수 요소이기도 하다.

그리고 객체지향 프로그래밍을 지원한다. Interface, Generic등을 지원하여 크고 복잡한 프로젝트 코드의 기반을 단단하게 구성할 수 있도록 도울 뿐 아니라, Java나 C# 등의 객체지향 언어에 익숙한 개발자가 자바스크립트 프로젝트를 참여할 때 러닝 커브를 낮추는 효과도 가지고 있다.

 

트랜스파일

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

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

** 사실 작성된 코드를 다른 무언가로 바꿔준다는 관점에서는 크게 차이가 없어 둘을 구분하지 않는 경향이 있다.