TypeScript) TypeScript, 왜 쓰는걸까?

JavaScript

1995년 넷스케이프사의 브렌던 아이크(Brendan Eich)가 자사의 웹브라우저에 탑재하기 위해 개발한 스크립트 언어입니다. 

초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었습니다.

 

그래서 이 시기에 대부분 로직은 주로 웹서버에서 실행되었고 브라우저(클라이언트)는 서버로부터 전달받은 HTML과 CSS를 렌더링하는 수준이었다고 합니다.

 

하지만 추후 AJAX의 활성화로 데스크탑 애플리케이션과 유사한 사용자 경험을 제공할 수 있게 되었고, 이로 인해 서버측이 담당하던 업무의 상당부분이 클라이언트 측으로 이동함으로써 자바스크립트는 웹의 어셈블리 언어로 불릴 만큼 중요한 언어로 그 위상이 높아지게 되었습니다.

플러그인 의존성이 높던 웹 애플리케이션도 HTML5가 등장함으로써 기존 구축 방식이 자바스크립트로 대체되었습니다.

 

하지만 자바스크립트는 언어가 잘 정제되기 이전에 서둘러 출시된 문제와 과거 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 만들어진 태생적 한계로 좋은 점 뿐만 아니라 나쁜 점도 많은 것이 사실입니다.

 

C,Java와 JS의 차이점

• Prototype-based Object Oriented Language
• Scope와this
• 동적 타입(dynamic typed) 언어 혹은 느슨한 타입(loosely typed) 언어

위의 특성들은 객체지향 프로그래밍에 익숙해진 개발자들로 하여금 혼란을 주어 코드가 복잡해질 수 있고 디버그와 테스트 수가 증가하게 되어 큰 규모의 프로젝트에서는 조심해야하는 단점을 가지고 있습니다.

 

 

바로 그 때, TypeScript가 등장합니다!

 

 

TypeScript의 등장

JS의 단점을 극복하고자 CoffeeScript, Dart, Haxe 등의 AltJS(JS의 대체언어)가 등장하였는데 TypeScript 또한 JS 대체 언어의 하나로써 자바스크립트(ES5)의 Superset(상위확장)입니다.

 

Typescript superset

 

TypeScript는 다음과 같은 특징을 가지고 있습니다.

 

• 정적 타이핑 지원
• ES6(ECMAScript 2015)의 클래스, 모듈 등과 ES7의 Decorator 등을 지원
• TypeScript는 ES5의 Superset이므로 기존의 자바스크립트(ES5) 문법을 그대로 사용할 수 있음
• ES6의 새로운 기능들을 사용하기 위해별도 트랜스파일러(Transpiler)를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진(현재의 브라우저 또는 Node.js)에서 실행할 수 있음
• 이후 ECMAScript의 업그레이드에 따른 새로운 기능을 지속적으로 추가할 예정이여서 매년 업그레이드될 ECMAScript의 표준을 따라갈 수 있는 좋은 수단
• AngularJS의 후속 버전인Angular의 TypeScript 정식 채용으로 TypeScript에 관심이 커져가고 있음
• 구글 또한 2년간의 검토 끝에 2017년 3월 사내 표준 언어(Canonical Languages)로 TypeScript의 사용을 승인

구글은 구글애널리틱스, 파이어베이스, 구글 클라우드 플랫폼 등 대규모 프로젝트와 버그 추적, 채용 검토, 제품 승인 및 출시 도구와 같은 핵심적인 내부 도구에 TypeScript와 TypeScript 기반 Angular를 사용하고 있다.

 

여기서 들 수 있는 의문점,,

 

 

계속 괄호 안에 ES5, ES6, ECMAScript 2015 이런게 자꾸 붙는데 이게 뭘까?

 

 

ECMAScript는 Ecma International이라는 비 영리 단체에서 만든표준화된 프로그래밍 언어입니다.

 

쉽게 말하자면 자바스크립트를 표준화 하기 위해 만든 언어입니다!

 

자 근데 뒤에 붙는 숫자 끝자리가 다 5 이상이죠? 이것도 이유가 있답니다..

 

현재 사용자들이 많이 사용하고 있는 구글의Chrome이 등장하기 전까지는 IE(Internet Expolorer)가 웹 브라우저 시장의 90% 이상을 점유하고 있었다고 해요.. 근데 이 놈들이 EcmaScript의 표준을 무시하고 자신들 마음대로 JS의 생태계를 파괴했다고 합니다. 불안정했던 JS의 생태계는 Chrome이 V8이라는 강력한 엔진과 함께 등장하면서 안정화 되었고, 그 기점이 바로 2015년 이라고 합니다!(ES6가 15년에 나온거)

 

그래서 2015년을 기점으로 EcmaScript는 문법에 많은 변화가 생겼는데요, 현재까지도 매년 문법 변경사항이 발표가 되고 있답니다. 

현재는 ES2021이 최신입니다!

 

 

TypeScript의 장점

 

1. 정적 타이핑

 

아래의 코드를 예로 들어보겠습니다.

// JavaScript

function sum(a, b) {
  return a + b;
}

개발자는 2개의 숫자 타입 인수를 전달받아 그 합계를 반환하려고 위와 같은 코드를 설계했습니다.

 

하지만 코드상으로는 어떤 타입의 인수를 전달하여야 하는지, 어떤 타입의 반환값을 리턴해야 하는지 명확하지 않죠?

따라서 위 함수는 아래와 같이 호출될 수 있습니다.

// JavaScript

function sum(a, b) {
  return a + b;
}

sum('x', 'y'); // 'xy'

동적 타입인 JS에서 위 코드는 아무런 문제가 되지 않으므로 정상 실행 되지만, 개발자가 원하는 숫자타입의 인수를 더한 결과는 나오지 않습니다.

이러한 문제가 어느정도 사이즈가 있는 프로젝트에서 발생했다고 하더라도 Error가 나지 않으니 바로 알아챌 수 없겠죠?

 

이 코드를 TypeScript로 바꾸어 보겠습니다.

// TypeScript

function sum(a: number, b: number) {
  return a + b;
}

sum('x', 'y');
// error TS2345: Argument of type '"x"' is not assignable to parameter of type 'number'.

JS와 달리 TS는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있겠죠?

 

이러한 명시적인 정적 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있는데, 이는 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅을 쉽게 할 수 있습니다!

 

 

2. 도구의 지원

TS의 또 하나의 큰 장점은 IDE(통합개발환경)를 포함한 다양한 도구의 지원을 받을 수 있다는 것입니다.

 

IDE와 같은 도구에 타입 정보를 제공함으로써 높은 수준의 인텔리센스(IntelliSense), 코드 어시스트, 타입 체크, 리팩토링 등을 지원받을 수 있고, 이러한 지원을 통해 대규모 프로젝트를 진행할 때 편의성을 제공합니다.

 

 

3. 강력한 객체지향 프로그래밍 지원

기존의 프로토타입 기반 프로그래밍에 비해 TS가 제공하는 객체지향 프로그래밍 지원은 크고 복잡한 프로젝트의 코드 기반을 쉽게 구성할 수 있도록 도우며, Java, C# 등의 클래스 기반 객체지향 언어에 익숙한 개발자가 자바스크립트 프로젝트를 수행하는 데 진입 장벽을 낮추는 효과도 있습니다!

 

 

4 ES6 / ES Next 지원

브라우저만 있으면 컴파일러 등의 개발환경 구축없이 바로 사용할 수 있는 ES5와 비교할 때, 개발환경 구축 관점에서 다소 복잡해진 측면이 있지만 현재 ES6를 완전히 지원하지 않고 있는 브라우저를 고려하여 Babel 등의 트랜스파일러를 사용해야 하는 현 상황에서 TypeScript 개발환경 구축에 드는 수고는 그다지 아깝지 않을 것이라고 합니다.

 

또한, TypeScript는 아직 ECMAScript 표준에 포함되지는 않았지만 표준화가 유력한 스펙을 선제적으로 도입하므로 새로운 스펙의 유용한 기능을 안전하게 도입하기에 유리하다네요!

 

5. Angular

마지막으로 Angular는 TypeScript 뿐만 아니라 자바스크립트(ES5, ES6), Dart로도 작성할 수 있지만 Angular 문서, 커뮤니티 활동에서 가장 많이 사용되고 있는 것이 TypeScript입니다.

 

Angular 관련 문서의 예제 등도 TypeScript로 작성된 것이 대부분이어서 관련 정보를 얻을 때 이점이 있으며 이러한 현상은 앞으로도 지속될 것으로 예상하고 있습습니다.

 

 

 

 

이상으로 TypeScript가 왜 대세인지, 왜 쓰는지 알아봤습니다!

 

 

정말 JS에서 불편했던 점이 많이 개선되었고 TS만의 장점 또한 뚜렷하네요.

좀 더 써보고 비교해야 체감이 더 되겠지만 어떤 부분이 바뀌고 좋은지 알았으니 써보면서 그 부분들을 주의깊게 살펴봐야겠습니다.

 

 

감사합니다!

 

 

참고자료

TypeScript - Intro & Install | PoiemaWeb