TypeScript
#
Find similar titles
- (rev. 4)
- jmkang
Structured data
- Category
- Programming
Table of Contents
TypeScript #
TypeScript란 #
C#의 창시자인 덴마크 출신 소프트웨어 엔지니어 Anders Hejisberg가 개발을 주도한 TypeScript는 마이크로소프트에서 구현한 JavaScript 대체 언어의 하나로써 JavaScript(ESS)의 Super set(상위확장) 프로그래밍언어로 확장자는 .ts를 사용하고 컴파일의 결과물로 JavaScript파일인 .js를 출력한다. 최종적으로 런타임에서는 이렇게 출력된 JavaScript 코드를 구동시키게 된다. TypeScript는 Microsoft에서 2012년 발표한 오픈소스로 정적 타이핑을 지원하며 ES6(ECMA Script 2015)의 클래스, 모듈 등과 ES7의 Decorator 등을 지원한다.
TypeScript는 이름답게 타입을 명시할 수 있다는 것이 JavaScript와의 가장 큰 차이점이다. 인터프리터 언어(프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경)의 경우 타입 검사(Type Checking)가 없어서 코드 작성 후 에러가 나면 디버깅이 매우 어렵다. 따라서 코드 작성 시 에러를 줄이기 위한 노력이 필요했고 이를 충족시키기 위한 언어가 TypeScript이다.
그림1 JBrowse workflow
출처 : https://poiemaweb.com/typescript-introduction
TypeScript는 ES5의 Superset이므로 기존의 JavaScript(ES5)의 문법을 그대로 사용할 수 있다. 또한, ES6의 새로운 기능들을 사용하기 위해 Babel과 같은 별도 트랜스파일러(Transpiler)를 사용하지 않아도 ES6의 새로운 기능을 기존의 JavaScript 엔진(현재의 브라우저 또는 Node.js)에서 실행할 수 있다.
그림1 JBrowse workflow
출처 : https://poiemaweb.com/typescript-introduction
AngularJS의 후속 버전인 Angular의 TypeScript 정식 채용과 구글의 Angular 주력언어로 TypeScript를 사용하게 되면서 주목을 받게 되는 언어가 되었다.
문법의 특징 #
-
변수 변수 또는 값의 타입을 표기하기 위해 식별자 또는 값 뒤에 콜론(:)을 붙여 value: type의 형태로 표기한다.
var check: boolean = false; var name: string = '홍길동' var height: number = 180; var initValue: any = 10; (any타입의 변수에는 어느 타입이든 들어올 수 있다.)
-
컬렉션
var list: number[] = [1,2,3]; var list: Array<number> = [1,2,3];
-
함수
function addFunction(a: number, b: number){ return a+b; }
-
오브젝트
var personObj = { firstName: '홍', lastName: '길동' }
-
인터페이스 기본적인 interface 문법으로 class 선언하듯 property를 정해서 interface로 선언하고 사용하면 된다. 이때 property 속성을
?
keword를 사용하면 optional로 처리하여 사용하는 class가 사용하지 않게 할 수 있다.interface Person { name: string; age: number; height?: number; move(): void; } var hong: Person = { name: 'hong', age: 20, move:() => {} }
-
클래스
class Point { x: number; constructor(x: number, public y: number = 0) { this.x = x; } dist(){ return Math.sqrt(this.x * this.x + this.y * this.y); } static origin = new Point(0,0); } var point1 = new Point(10, 20);
활용 범위 #
JS가 사용되는 곳에서는 TS도 사용할 수 있다. 그리고 TS에 JS 코드를 작성해도 실행이 된다. VS20xx 뿐만 아니라 Node.js의 npm 을 통해서 컴파일러를 다운받을 수 있어서 다른 통합개발 도구에서도 컴파일러 설정을 잡아 주기만 해도 컴파일이 가능하다.
참고 사이트 #
- 나무위키 - TypeScript
- PoiemaWeb - TypeScript의 소개와 개발 환경 구축
- 블로그, 하이벅스 - TypeScript : 개요
- 블로그, madori GNJ - 타입스크립트(Type Script) 데이터 타입, 예제
- 블로그, charlie - TypeScript 문법 특징 (Basic types, Interfaces, Classes)
- Fall in IT 블로그, Jade_ - Typescript 기초문법