1. 자바스크립트의 역사
1995년 넷스케이프사의 브랜던 아이크(Brendan Eich)가 자사의 웹브라우저인 Navigator 2에 탑재하기 위해서 개발한 스크립트 언어이다.
웹페이지의 보조적인 기능 수행을 위한 한정적인 용도로 사용되었으며, 이 시기에 대부분 로직은 주로 웹서버에서 실행되었고 브라우저(클라이언트)는 서버로부터 전달받은 HTML과 CSS를 렌더링하는 수준이였다.
HTML5가 나오기 이전에는 플러그인에 의존하는 인터랙티브한 웹페이지를 구축해왔지만 HTML5가 나오고 난 이후에 플러그인에 의존하는 방식은 자바스크립트로 대체되었다.
또한 AJAX의 활성화로 인한 SPA가 대세가 되었고, 과거 서버 측이 담당하던 업무의 많은 부분이 클라이언트 측으로 이동하게 되어 자바스크립트는 웹의 어셈블리 언어로 불릴 만큼 중요한 언어가 되었다.
2. 자바스크립트와 C나 Java같은 C-family언어와의 구별점
- Prototype-based Object Oriented Language
- Scope와 this
- 동적 타입(dynamic typed)언어 혹은 느슨한 타입(loosely typed)언어
3.TypeScript
위와 같은 특성으로 디버그와 테스트 공수가 증가하는 등의 문제를 일으킬 수 있어 특히 규모가 큰 프로젝트에서는 주의해야하기 때문에 태생적 문제를 극복하고자 C#의 창시자인 덴마크 출신 소프트웨어 엔지니어 Anders Hejlsber(아네르스 하일스베르)가 개발을 주도한 TypeScript는 Microsoft에서 2012년 발표한 오픈소스로 정적 타이핑을 지원하며 EX6(ECMAScript 2015)의 클래스, 모듈 등과 ES7의 Decorator 등을 지원한다.
출처: https://poiemaweb.com/typescript-introduction
4.TypeScript의 장점
- 기존 자바스크립트(ES5)문법을 그대로 사용가능
- ES6의 새로운 기능들을 사용하기 위한 Babel과 같은 별도 트랜스파일러를 사용하지 않아도 실행가능
- 정적인 타입
- 자바스크립트는 런타임에 동적으로 검사하기에 프로그램 실행전에는 타입에러를 잡을 수 없지만 타입스크립트는 이런 문제를 만들기 전에(런타임 이전에)타입을 검사할 수 있게 만들어졌다.
- 도구의 지원
IDE(통합개발환경)를 포함한 다양한 도구의 지원을 받을 수 있다. IDE와 같은 도구에 타입 정보를 제공함으로써 높은 수준의 인텔리센스, 코드 어시스트, 타입체크, 리팩토링 등을 지원받을 수 있으며 도구의 지원은 대규모 프로젝트를 위한 필수 요소이기도 하다.
- 강력한 객체지향 프로그래밍 지원
인터페이스, 제너릭 등과 같은 강력한 객체지향 프로그래밍 자원은 크고 복잡한 프로켁트의 코드 기반을 쉽게 구성할 수 있도록 도우며 클래스기반 객체지향 언어에 익숙한 개발자의 진입장벽을 낮추는 효과가 있다.
- ES6 / ES Next지원
ES6를 완전히 지원하지 않는 브라우저를 고려할 때 다른 트랜스파일러를 사용하지 않고 개발환경을 구축할 수 있다는 장점이 있다.
또한 TypeScript는 아직 ECMAScript 표준에 포함되지는 않았지만 표준화가 유력한 스펙을 선제적으로 도입하므로 새로운 스펙의 유용한 기능을 안전하게 도입하기에 유리하다. - Angular
TypeScript 뿐만 아니라 자바스크립트, Dart로도 작성가능하지만 Angualr 문서, 커뮤니티 활동에서 가장 많이 사용되고 있는 것은 TypeScript이다.
정적인 타입의 예
function sum(a, b) {
return a + b;
}
sum('x', 'y') //'xy'위와 같이 자바스크립트의 경우 코드상으로 어떤 타입의 인수를 전달하여야 하는지, 어떤 타입의 반환값을 리턴해야 하는지 명확하지 않다.
자바스크립트의 문법에서는 어떠한 문제가 없으므로 위 코드가 실행될 것이다.
이러한 상황이 발생한 이유는 변수나 반환값으미 타입을 사전에 지정하지 않는 자바스크립트의 동적 타이핑(Dynamic Typing)에 의한 것이다.
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'.TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있다는 장점이 있다. 명시적인 정적 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있다. 이는 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅을 쉽게 한다.
출처: https://poiemaweb.com/typescript-introduction
타입 선언
function CheckNumberIsZero(par){
return par == 0;
}
checkNumberIsZero(0); //true
checkNumberIsZero([]); //true
checkNumberIsZero(""); // true
checkNumberIsZero(false); //true
checkNumberIsZero(this); //? (this에 따라 달라진다.)위와 같이 자바스크립트에서 checkNumberIsZero()함수는 인자의 타입을 제한하지 않아 아무 타입이나 인자로 쓸 수 있고, 비교 부분에서는 강제 형변환을 해서 예기치 않았던 동작이 발생한다.
function checkNumberIsZero(par: number): boolean {
return par === 0;
}
checkNumberIsZero(0); //true
checkNumberIsZero([]); // error
checkNumberIsZero(""); // error
checkNumberIsZero(false); // error
checkNumberIsZero(this); // error이와 같이 타입스크립트로 작성이 가능하다.
출처: 휴먼스케이프 기술 블로그
출처
1.https://poiemaweb.com/typescript-introduction
2.휴먼스케이프 기술 블로그
