[펌] TypeScript

이번 글은 TypeScript 에 대한 글 입니다.

개념 정리를 하면서 좋을 글이 있어, 많은 내용을 가져와 사용하였습니다.

(참고 : http://cyberx.tistory.com/60)

1. TypeScript란

2. 설치

3. 변수와 함수

4. 클래스

5. 인터페이스

6. 상속

---

1. TypeScript란

- TypeScript는 대형 자바스크립트 애플리케이션에 적합한 대안 언어이다.

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

- TypeScript는 ES5 (ECMAScript 5) 문법의 상위 집합(Super Set)이다.

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

- TypeScript는 ES6 (ECMAScript 6)에서 제안된 여러가지 기능들과 클래스, 모듈등의 문법도 포함되어 있다.

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

2. 설치

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

 ※ eclipse 에서 nodeclipse 플러그인을 설치한 후, 커맨드에서 작업을 해도 가능합니다.

3. 변수와 함수

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

ex) Hello.ts  --> tsc Hello.ts --> Hello.js

  [Hello.ts]

function append(str1:string, str2:string): string{
    return str1 + str2;    
}

var str:string = append('hello', 'Type Script!!');

console.log(str);

  [Hello.js]

function append(str1, str2) {
    return str1 + str2;
}

var str = append('hello', 'Type Script!!');

console.log(str);

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

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

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

4. 클래스

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

  [Greeter.ts] 

class Greeter {
    greeting: string;
    constructor(message: string){
        this.greeting = message;
    }
    
    greet() {
        return 'Hello, ' + this.greeting;
    }
}

var greeter = new Greeter('world');

  [Greeter.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');

5. 인터페이스

  [Label.ts] 

interface LabelValue {
    label: string;
}

function print(labelObj: LabelValue) {
    console.log(labelObj.label);
}

var obj = {
    size  : 10,
    label : 'Size 10 Obj'
}

print(obj);

  [Label.js] 

function print(labelObj) {
    console.log(labelObj.label);
}

var obj = {
    size: 10,
    label: 'Size 10 Obj'
};

print(obj);

6. 상속

  [Animal.ts]

class Animal {
    constructor(public name: string) { }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

class Snake extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}

class Horse extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 45) {
        console.log("Galloping...");
        super.move(distanceInMeters);
    }
}

let sam = new Snake("Sammy the Python");
let tom: Animal = new Horse("Tommy the Palomino");

sam.move();
tom.move(34);

  [Animal.js]

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Animal = (function () {
    function Animal(name) {
        this.name = name;
    }
    Animal.prototype.move = function (distanceInMeters) {
        if (distanceInMeters === void 0) { distanceInMeters = 0; }
        console.log(this.name + " moved " + distanceInMeters + "m.");
    };
    return Animal;
}());
var Snake = (function (_super) {
    __extends(Snake, _super);
    function Snake(name) {
        _super.call(this, name);
    }
    Snake.prototype.move = function (distanceInMeters) {
        if (distanceInMeters === void 0) { distanceInMeters = 5; }
        console.log("Slithering...");
        _super.prototype.move.call(this, distanceInMeters);
    };
    return Snake;
}(Animal));
var Horse = (function (_super) {
    __extends(Horse, _super);
    function Horse(name) {
        _super.call(this, name);
    }
    Horse.prototype.move = function (distanceInMeters) {
        if (distanceInMeters === void 0) { distanceInMeters = 45; }
        console.log("Galloping...");
        _super.prototype.move.call(this, distanceInMeters);
    };
    return Horse;
}(Animal));
var sam = new Snake("Sammy the Python");
var tom = new Horse("Tommy the Palomino");
sam.move();
tom.move(34);