TypeScript를 이용하여 javascript를 객체지향 언어처럼 사용해보자

TypeScript란?

TypeScript는 대형 자바스크립트 애플리케이션에 적합한 대안 언어이다. TypeScript를 활용하여 개발하여도 기존의 소프트웨어 컴포넌트와 자바스크립트 라이브러리의 동작 방식과는 충돌하지 않는다. 또한, 동적인 모듈 로딩을 지원하여 네이밍 충돌 문제를 줄일 수 있게 해주며, 추가된 타입 체계를 바탕으로 생산성을 높여주는 여러가지 툴과 사례(정적 타이핑, 심볼 기반 네비게이션, 구문 완성, 코드 리펙토링 등)를 활용할 수 있다.

TypeScript는 ES5 (ECMAScript 5) 문법의 상위 집합(Super Set)이다. 모든 자바스크립트 프로그램은 TypeScript 프로그램이기도 하다. TypeScript 컴파일러는 TypeScript 문법을 자바스크립트 문법으로 변환시켜주며, 이때 코드에서 변수를 정의한 순서나 이름을 바꾸지 않는다. 따라서, 자바스크립트 결과물을 브라우저에서 디버깅하여 TypeScript 코드를 수정하기에도 용이하다. 또한, 부가적으로 소스 맵도 제공하므로 TypeScript 소스를 직접 디버깅하는것도 가능하다. TypeScript를 지원하는 도구들은 일반적으로 코드 저장시 자바스크립트 결과물을 생산하며, 기존의 자바스크립트 개발 사이클 대로 프로젝트를 진행할 수 있다.

TypeScript는 ES6 (ECMAScript 6)에서 제안된 여러가지 기능들과 클래스, 모듈등의 문법도 포함되어 있다. 클래스는 전통적인 객체 지향 프로그래밍 패턴을 기반으로 상속과 같은 기능들을 자바스크립트 보다 훨씬 표현력있게 사용할 수 있다. 모듈은 네이밍 충돌 문제와 자유롭게 코드를 컴포넌트화 할 수 있게 해준다. 컴파일러에서는 모듈을 정적 또는 동적으로 로드할 수 있도록 하는 “모듈 코드 생성 (Module Code Generation)” 옵션을 제공하고 있다.

설치

Nodejs 를 통해서 npm install -g typescript 커맨드를 통해서 설치할 수 있으며 Visual Studio 2013 update 2가 설치되어 있다면 기본으로 설치되어 있다.

변수와 함수

1. 에디터로 HelloTS.ts 작성하여 tsc 커맨드로 컴파일을 하면 일반 javascript 소스의 js파일로 변환된다.

function append(str1:string, str2:string):string { return str1+str2; } var str:string = append('hello', ' TypeScript!!'); console.log(str);

변수의 타입을 변수명 뒤에 콜론과 함께 표시할 수 있고 함수의 반환형은 함수 끝에 콜론과 함께 표시한다. 반환값이 없다면 void를 사용하면 된다.

변수 타입으로는 기본적으로 boolean, number, string과 모든 타입을 전부 받을수 있는 any가 있다.

타입이 맞지 않으면 컴파일이 되지않으며, TypeScript를 지원하는 에디터툴을 이용하면 더욱 편하게 사용할 수 있다. 

var var1:number; var var2:boolean; var var3:string; var1 = 'abc'; var2 = 123; var3 = 123;

위 코드처럼 타입이 맞지않게 변수에 값을 할당하면 컴파일이 되지 않는다.

배열은 다음과 같이 두가지 형식으로 사용할 수 있다.

var list:number[] = [1, 2, 3]; var list:Array<number> = [1, 2, 3];

클래스 

TypeScript를 이용하면 객체지향언어처럼 클래스를 표현할 수 있다. 다음 코드에 나오다 시피 C#이나 Java와 많이 닮아있어 객체지향언어에는 익숙하지만 javascript에 익숙하지 않은 개발자가 이질감없이 사용 할 수 있다.

class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } var greeter = new Greeter("world");

컴파일을 해보면 변환된 js코드는 다음과 같다.

var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; })(); var greeter = new Greeter("world");

인터페이스 

function printLabel(labelledObj: {label: string}) { console.log(labelledObj.label); } var myObj = {size: 10}; printLabel(myObj);

위와같이 printLabel 함수에 파라미터 labelledObj에 label값을 강제할 수 있다. 위 코드에서 myObj는 label값이 없기때문에 컴파일시 다음과 같은 에러가 발생한다.

실제 interface를 만드는것과 같이 코드를 작성할수도 있다.

interface LabelledValue { label: string; } function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label); } var myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj);

다음은 함수타입의 인터페이스이다.

interface SearchFunc { (source: string, subString: string): boolean; } var mySearch: SearchFunc; mySearch = function(source: string, subString: string) { var result = source.search(subString); if (result == -1) { return false; } else { return true; } }

SearchFunc 인터페이스는 반환값이 boolean형태이고 파라미터는 string,string 값이어야한다. 따라서 SearchFunc타입의 mySearch 함수는 위와 같은 타입으로 선언되지 않으면 다음과같이 컴파일 오류가 난다.

상속

class Animal { name:string; constructor(theName: string) { this.name = theName; } move(meters: number = 0) { alert(this.name + " moved " + meters + "m."); } } class Snake extends Animal { constructor(name: string) { super(name); } move(meters = 5) { alert("Slithering..."); super.move(meters); } } class Horse extends Animal { constructor(name: string) { super(name); } move(meters = 45) { alert("Galloping..."); super.move(meters); } } var sam = new Snake("Sammy the Python"); var tom: Animal = new Horse("Tommy the Palomino"); sam.move(); tom.move(34);

클래스의 상속도 위와 같은 방법으로 코딩 할 수 있다.

출처 http://www.typescriptlang.org/