자바스크립트는 1995년 넷스케이프사의 브렌던 아이크(Brendan Eich)가 자사의 웹브라우저인 Navigator 2에 탑재하기 위해 개발한 스크립트 언어이다.
초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었다.
개발의 규모가 커질수록 타입을 명시할 필요가 없는 JavaScript의 경우, 어떤 유형의 데이터가 전달되는지 이해하기 어려울 수 있고 이는 개발자에게 알 수 없는 오류를 안겨주게 됩니다. 결국 개발자는 알 수 없는 오류를 찾기 위해 많은 시간과 노력을 쏟게 됩니다.
이와 같은 비효율을 없애기 위해서 TypeScript가 필요합니다. TypeScript는 개발자가 코드 내에서 전달되는 데이터의 유형을 지정할 수 있도록 하여 개발 프로세스 초기에 오류를 포착하게 할 뿐 아니라 코드베이스를 더 쉽게 이해하고 유지 및 관리할 수 있게 도와줍니다.
TypeScript를 활용하면 위에서 언급한 것처럼 개발 프로세스 초기에 오류를 미리 발견할 수 있어 안정적인 개발 환경에 도움을 주기 때문에 이미 많은 기업에서 사용하고 있는 언어입니다.
설문에 참여한 한 현직 프론트엔드 개발자의 말을 빌리면 TypeScript를 사용한 경험이 없는 지원자는 서류 전형에서 탈락시키는 경우까지 있다고 합니다. 물론 기업마다 상황의 차이가 있기 때문에 일반화하긴 어렵지만 프론트엔드 포지션 채용 시장에서 1년 차 또는 그 미만 프론트엔드 개발자에게 TypeScript를 요구하는 곳이 많아지고 있다는 것입니다.
따라서 JavaScript 언어로 안정적으로 개발하고 채용 시장에서의 경쟁 우위를 선점하기 위해서 0~1년 차 프론트엔드 개발자에게 TypeScript는 매우 중요한 언어입니다.
HTML5가 등장하기 이전까지 웹 애플리케이션은 플래시, 실버라이트, 액티브엑스와 같은 플러그인에 의존하여 인터랙티브한 웹페이지를 구축해왔다.
HTML5가 등장함으로써 플러그인에 의존하던 구축 방식은 자바스크립트로 대체되었다.
AJAX의 활성화로 데스크탑 애플리케이션과 유사한 사용자 경험을 제공할 수 있는 SPA(Single Page Application) 가 대세가 되었다.
과거 서버 측이 담당하던 업무의 많은 부분이 클라이언트 측으로 이동하게 되었고,
자바스크립트는 웹의 어셈블리 언어로 불릴 만큼 중요한 언어로 그 위상이 높아지게 되었다.
자바스크립트는 C나 Java와 같은 C-family 언어와는 구별되는 아래와 같은 특성이 있다.
- Prototype-based Object Oriented Language
- Scope와 this
- 동적 타입(dynamic typed) 언어 혹은 느슨한 타입(loosely typed) 언어
클래스 기반 객체지향 언어(Java, C++, C# 등)에 익숙한 개발자를 혼란스럽게 하며
코드가 복잡해질 수 있고 디버그와 테스트 공수가 증가하는 등의 문제를 일으킬 수 있다.
이같은 문제를 극복하고자
TypeScript가 자바스크립트 대체 언어의 하나로써 자바스크립트(ES5)의 Superset(상위확장)이다.
C#의 창시자인 덴마크 출신 소프트웨어 엔지니어 Anders Hejlsberg(아네르스 하일스베르)가 개발을 주도한 TypeScript는 Microsoft에서 2012년 발표한 오픈소스로, 정적 타이핑을 지원하며 ES6(ECMAScript 2015)의 클래스, 모듈 등과 ES7의 Decorator 등을 지원한다.
코드상으로는 어떤 타입의 인수를 전달하여야 하는지, 어떤 타입의 반환값을 리턴해야 하는지 명확하지 않다.
function sum(a, b) {
return a + b;
}아래의 예제는 변수나 반환값의 타입을 사전에 지정하지 않는 자바스크립트의 동적 타이핑(Dynamic Typing)에 의한 것이다.
function sum(a, b) {
return a + b;
}
sum('x', 'y'); // 'xy'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'.명시적인 정적 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있다. 이는 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅을 쉽게 한다.
IDE와 같은 도구에 타입 정보를 제공함으로써 높은 수준의 인텔리센스(IntelliSense), 코드 어시스트, 타입 체크, 리팩토링 등을 지원받을 수 있으며 이러한 도구의 지원은 대규모 프로젝트를 위한 필수 요소이다.
IDE란?
통합 개발 환경(Integrated Development Environment, IDE)
공통된 개발자 툴을 하나의 그래픽 사용자 인터페이스(Graphical User Interface, GUI)로 결합하는 애플리케이션을 구축하기 위한 소프트웨어이다.
인터페이스, 제네릭 등과 같은 강력한 객체지향 프로그래밍 지원은 크고 복잡한 프로젝트의 코드 기반을 쉽게 구성할 수 있도록 도와준다.
TypeScript는 아직 ECMAScript 표준에 포함되지는 않았지만 표준화가 유력한 스펙을 선제적으로 도입하므로 새로운 스펙의 유용한 기능을 안전하게 도입하기에 유리하다.
타입스크립트는 딱히 자바스크립트에 비해 함수형 프로그래밍하기가 더 좋은 언어는 아니다라고 한다.
하지만 함수형 프로그래밍에 나쁘다는 것은 아니다.
타입스크립트는 자바스크립트의 확장이기 때문에 자바스크립트로 할 수 있는 것을 할 수 없는 것은 아니다.
문제가 되는 함수형 프로그래밍 부분의 번거로움을 감수한다면 함수형 프로그래밍의 장점과 타입스크립트의 장점을 동시에 가져갈 수 있다.
TypeScript 파일(.ts)은 브라우저에서 동작하지 않으므로 TypeScript 컴파일러를 이용해 자바스크립트 파일로 변환해야 한다.
이를 컴파일 또는 트랜스파일링이라 한다.
전역에 TypeScript 설치한다.
$ npm install -g typescripttypeScript 버전 확인
$ tsc -v
Version 2.8.3TypeScript 컴파일러(tsc)는 TypeScript 파일(.ts)을 자바스크립트 파일로 트랜스파일링한다.
tsc 명령어 뒤에 트랜스파일링 대상 파일명을 지정한다. 이때 확장자 .ts는 생략할 수 있다.
$tsc script트랜스파일링을 한후에 같은 디렉토리에 자바스크립트 파일이 생성된다.
하지만 트랜스파일링된 파일은 ES3버전이다.
컴파일의 자바스크립트 기본 버전이 ES3이기 떄문이다.
트랜스파일링으로 자바스크립트 버전을 변경하려면 -target 또는 -t를 사용한다.
현재 tsc가 지원하는 자바스크립트 버전은 ‘ES3’(default), ‘ES5’, ‘ES2015’, ‘ES2016’, ‘ES2017’, ‘ES2018’, ‘ES2019’, ‘ESNEXT’이다.
EX) ES6버전으로 트랜스파일링을 실행하려면
$ tsc script -t ES2015tsc 옵션 설정파일인 tsconfig.json가 생성되어 기본옵션을 설정할 수 있다.
$ tsc --init
message TS6071: Successfully created a tsconfig.json file.
-watch 또는 -w 옵션을 사용하면 트랜스파일링 대상 파일의 내용이 변경되었을 때 이를 감지하여 자동으로 트랜스파일링이 실행된다.
$ tsc --watchtsconfig.json기본 옵션으로 추가할 수 있다.
tsc 명령어 뒤에 파일명을 지정하면 tsconfig.json이 무시된다
$ tsc person # ✘ tsconfig.json이 무시된다.tsc명령어를 하면 폴더내의 모든 TypeScript파일이 트랜스파일링이 된다.
$ tsc