소개
타입스크립트란 Microsoft사에서 개발한 언어로 자바스크립트 기반의 오픈소스 언어이다. 자바스크립트에 타입을 부여한 것으로 보면 된다.
타입스크립트는 자바스크립트, ECMAScript3, ECMAScript5, ECMAScript6를 모두 지원하고, Microsoft 팀은 ECMAScript 표준에 따라 TypeScirpt Compiler를 계속해서 개선해 커밋하고 있다.
처음 출시 당시에는 Windows 이외의 다른 개발 환경에 대한 지원이 부족해서 인기가 적었으나 현재는 모든 브라우저, 모든 OS, 자바스크립트가 허용되는 모든 곳에서 사용이 가능하며 Angular에서 이 언어를 메인으로 채택할 정도로 앞서나가고 있다고 볼 수 있다.
사용 이유
자바스크립트만으로도 충분히 개발이 가능하고 이미 머리가 복잡한데 왜 굳이 타입스크립트의 인기가 올라가고 또 우릴 공부하게 만드는 걸까..
Compiling을 통한 에러의 사전 방지
자바스크립트의 최대 장점은 컴파일링을 하지 않는다는 점인데, 아이러니하게도 컴파일링을 하지 않아서 괄호, 콤마, double quote, single quote 등에 의한 자잘한 실수를 찾지 못하게 되는 경우가 빈번히 일어난다. 어느 부분에서 오류를 만들었는지 직접 눈으로 한 줄 한 줄 읽으면서 찾아야하기 때문에 시간도 많이 잡아먹히게 된다.
타입스크립트는 컴파일 단계를 거쳐 오류를 찾아주기 때문에 규모가 큰 작업일 수록 이러한 특징이 더 부각된다.
기존 자바스크립트는 변수에 지정된 타입이 없이 가변적으로 타입이 변화될 수 있었지만, 타입스크립트는 type annotations를 이용해 변수에 타입을 지정한다.
언제든 타입이 변화되는 자바스크립트에 매력도 부정할 수 없지만, 이로 인해서 발생할 수 있는 여러 경우의 버그나 오류들을 타입을 지정함으로써 전에 방지할 수 있다.
예를 들면 아래와 같이 2개의 인자를 받아 합계를 구하는 함수를 만들었다고 쳐보자.
자바스크립트의 경우 a, b의 값으로 숫자, 문자 구분 없이 모두 넣을 수 있고 오류가 발생되지 않을 것이다. 때문에 숫자만을 입력받고 싶은 경우엔 if문을 이용해 별도의 처리를 해주어야만 한다.
function sum(a, b) {
if(typeof a !== 'number') return;
return a+b;
}하지만 타입스크립트의 경우 타입을 지정하기 때문에 숫자 이외의 값은 a, b로 전달될 수 없다.
function sum(a: number, b: number) {
return a+b;
}
해도해도 끝이 없는 웹의 늪
작년에 typescript + ReactJS로 죽을 뻔 해서 올해엔 다시 공부하는 김에 정리 용으로 시리즈 포스팅해보려 한다.
고수님들 제발 저에게 용기와 지혜를 주세요..
댓글