타입스크립트 Typescript
타입스크립트는 마이크로소프트에서 2012년도에 발표한 언어입니다. 이름에서 느껴지듯이 자바스크립트를 기반(물론 자바스크립트는 자바기반이 아니지만)으로 정적 타입 문법을 더한 언어입니다.
그래서 자바스크립트 유저라면 간단하게 배울 수 있고 자바스크립트의 타입으로부터 오는 문제점들을 해결해주어서 갈수록 시장에서 한 자리씩 차지하고 있는 언어입니다. 앵귤러2 버전에선 정식으로 타입스크립트를 채택했고, React.js나 Vue.js에서도 타입스크립트를 사용하는 것을 심심치 않게 볼 수 있습니다.
저는 학부를 거쳐오며 C, C++, JAVA, Javascript, Python, Kotlin 등 다양한 언어를 접했는데 이 자바스크립트가 가진 유연함(변수 선언이나 구조 등의)에 반해서 본격적으로 자바스크립트를 집중적으로 공부하기 시작했습니다. 그 과정에서 가장 많이 겪은게 TypeError와 관련된 에러들이었던 것 같습니다. 그리고 나름 익숙해졌다고 생각하는 지금에도 가끔씩 TypeError를 만들어내고는 합니다. 그래서 이러한 문제점을 방지하고 식견을 넒히고자 타입스크립트도 한 번 만져보게 되었습니다.
타입스크립트의 특징
타입스크립트는 컴파일, 정적 타입 언어입니다. 기존 자바스크립트는 인터프리터 스크립트 언어이며, 동적 타입 언어였습니다. 그래서 자바스크립트는 실행 시 프로그램을 즉시즉시 번역하여 실행하는 특징을 가졌는데, 이는 컴파일 언어에 비하면 동작이 느리다는 점이 있습니다. 또, 자바스크립트의 동적 타입 언어라는 것은 타입이 실행되는 순간에 결정되는 언어입니다. 반면 타입스크립트는 컴파일 언어로, TS컴파일러 혹은 Babel을 통해서 자바스크립트 코드로 해석되어 실행됩니다. 그래서 작성하는 순간에 타입 에러 등을 발견할 수 있고 인터프리터 언어에 비해 실행 속도가 빠릅니다.
또 다른 특징은 자바스크립트 슈퍼셋이라는 점입니다. 서론에서도 소개하며 언급했지만 자바스크립트를 기반으로 만들어진 언어이기에 .js 확장자를 .ts로 변경하여 타입스크립트로 컴파일 할 수 있습니다. 당연한 이야기겠지만 .ts -> .js는 불가능합니다. 또한 ES6 이후 문법도 지원하기 때문에 class 명령을 통한 다양한 객체 지향 구문도 작성할 수 있습니다.
추가로, Babel이라는 것이 나왔는데, Babel은 트랜스파일러(transpiler)라는 도구입니다. Babel은 자바스크립트, 타입스크립트 코드들을 ES5 표준에 맞게 알아서 변환해주는 도구입니다.
타입스크립트 환경 구성
타입스크립트를 설치하고 사용하는 환경 구성을 알아보겠습니다. 타입스크립트는 Node.js 런타임 환경이 필요합니다. 필요한게 아니라 그냥 환경이 똑같다고 할 수 있습니다. 그래서 그냥 Node.js를 설치하면 기본적으로 타입스크립트를 사용할 준비가 된 것입니다.
노드에 대한 기본적인 내용과 설치는 이 포스트를 참조해 주세요.
노드를 설치했다면 다음 npm명령으로 타입스크립트 컴파일러를 설치해주세요.
npm install -g typescript전역으로 설치할거면 -g옵션을 삽입하고, 해당 프로젝트 폴더만 설치할 것이라면 -g 옵션을 제거하면 됩니다. 그 다음 tsc -v를 입력해서 설치 버전이 뜬다면 설치가 완료된 것 입니다.
tsc -v
그리고 타입스크립트 코드의 js변환과 실행을 위해 ts-node라는 패키지를 설치해주세요.
npm i ts-node타입스크립트 사용해보기
그럼 이제 모든 언어의 첫 관문인 Hello world! 부터 찍고 시작하겠습니다.
프로젝트 폴더에 .ts파일을 하나 만들고 다음 코드를 작성해주세요.
console.log('Hello world!')그 다음 tsc명령으로 방금 만든 파일을 실행합니다. 그러면 사진과 같이 js파일이 하나가 나타나는데, 이것이 타입스크립트 컴파일러를 통해서 변환된 js 코드입니다. 이것은 node 통해 실행되면 제대로 실행되었음을 알 수 있습니다.
tsc 파일경로
혹은 ts-node로 한 번에 실행할 수도 있습니다.
ts-node 파일경로방금 Hello world로는 타입스크립트를 즐기기엔 어렵죠. 왜냐하면 그냥 자바스크립트 코드랑 차이가 없었으니까요. 그러면 타입스크립트를 느낄 수 있는 코드를 소개하고 이번 포스트를 마치겠습니다.
const helloTS = () => {
let str: string = 'Hello World!';
return console.log(str);
};
helloTS();