IK.AM

Node.jsインストール

TypeScriptのインストールにnpmを使うので、まずnode.jsをインストール。

$ brew install node
==> Downloading http://nodejs.org/dist/v0.8.14/node-v0.8.14.tar.gz
######################################################################## 100.0%
==> ./configure --prefix=/usr/local/Cellar/node/0.8.14
==> make install
==> Caveats
Homebrew installed npm.
We recommend prepending the following path to your PATH environment
variable to have npm-installed binaries picked up:
  /usr/local/share/npm/bin
==> Summary
/usr/local/Cellar/node/0.8.14: 861 files, 13M, built in 3.1 minutes
$ which npm
/usr/local/bin/npm

npmが使えることを確認。

/usr/local/share/npm/binをPATHに追加。

Windowsの場合はこちら。(C:\Program Files\nodejsあたりがPATHに追加されていることを確認)

proxyを設定する場合は

npm config set proxy http://ユーザ名:パスワード@プロキシサーバのURL:ポート番号
npm config set registry http://registry.npmjs.org/ <- これ(httpにする)も必要だった

TypeScriptインストール

$ npm install -g typescript
npm http GET https://registry.npmjs.org/typescript
npm http 200 https://registry.npmjs.org/typescript
npm http GET https://registry.npmjs.org/typescript/-/typescript-0.8.0.tgz
npm http 200 https://registry.npmjs.org/typescript/-/typescript-0.8.0.tgz
/usr/local/share/npm/bin/tsc -> /usr/local/share/npm/lib/node_modules/typescript/bin/tsc
typescript@0.8.0 /usr/local/share/npm/lib/node_modules/typescript
$ which tsc
/usr/local/share/npm/bin/tsc

tscが使えることを確認、

HelloWorldを書く

hello.tsc

class Greeter {
    constructor(public greeting: string) {
    }
    greet() {
    return "<h1>" + this.greeting + "</h1>";
    }
}

var greeter = new Greeter("Hello, world!");
console.log(greeter.greet());

tscでコンパイル

$ tsc hello.tsc

出力コードは

hello.js

var Greeter = (function () {
    function Greeter(greeting) {
        this.greeting = greeting;
    }
    Greeter.prototype.greet = function () {
        return "<h1>" + this.greeting + "</h1>";
    };
    return Greeter;
})();
var greeter = new Greeter("Hello, world!");
console.log(greeter.greet());

なかなかいい感じ

-eをつけると実行もしてくれる！

$ tsc hello.ts -e
<h1>Hello, world!</h1>

ちょっと遊ぶ場合はPlayGroudで！

emacsのtypescript-mode設定

install

$ wget http://www.interoperabilitybridges.com/media/155449/typescript_support_for_emacs.zip
$ unzip typescript_support_for_emacs.zip 
$ mv TypeScript\ support\ for\ Emacs/TypeScript.el (load-pathの通ったとこ)/typescript-mode.el

emacs.el編集

(autoload 'typescript-mode "typescript-mode" nil t)
(add-to-list 'auto-mode-alist '("\.ts$" . typescript-mode))

オブジェクト指向的なコード

class Car {
    constructor(public color: String = 'pink', 
                public direction: number = 0,
                public mph: number = 0){}
    gas(amount: number = 10) : Car {
        this.mph += amount;
        return this;
    }
    brake(amount: number = 10) : Car {
        var mph = this.mph - amount;
        this.mph = (mph < 0) ? 0 : mph;
        return this;
    }
}

var car1 = new Car();
console.log(car1);
console.log(car1.gas());
console.log(car1.brake());

-eをつけてコンパイルすると

$ tsc car.ts -e
{ color: 'pink', direction: 0, mph: 0 }
{ color: 'pink', direction: 0, mph: 10 }
{ color: 'pink', direction: 0, mph: 0 }

出力結果は

var Car = (function () {
    function Car(color, direction, mph) {
        if (typeof color === "undefined") { color = 'pink'; }
        if (typeof direction === "undefined") { direction = 0; }
        if (typeof mph === "undefined") { mph = 0; }
        this.color = color;
        this.direction = direction;
        this.mph = mph;
    }
    Car.prototype.gas = function (amount) {
        if (typeof amount === "undefined") { amount = 10; }
        this.mph += amount;
        return this;
    };
    Car.prototype.brake = function (amount) {
        if (typeof amount === "undefined") { amount = 10; }
        var mph = this.mph - amount;
        this.mph = (mph < 0) ? 0 : mph;
        return this;
    };
    return Car;
})();
var car1 = new Car();
console.log(car1);
console.log(car1.gas());
console.log(car1.brake());

jQueryでアプリを書く

定義ファイルが必要

$ wget https://github.com/deconcepter/jquery.d.ts/raw/master/jquery.d.ts

名前空間サポート最高っす

/// <reference path="jquery.d.ts" />                                                                                                  
module foo {
    export function init() {
        $('#clickme').on('click', e => {alert('Hello World!');});
    }
}

$(() => {
    foo.init();
});

コンパイル

$ tsc foo.ts

出力結果はこんな感じ

var foo;
(function (foo) {
    function init() {
        $('#clickme').on('click', function (e) {
            alert('Hello World!');
        });
    }
    foo.init = init;
})(foo || (foo = {}));

$(function () {
    foo.init();
});

さっと画面を作成

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript" src="foo.js"></script>
  </head>
  <body>
    <div>
      <button id="clickme">Click!</button>
    </div>
  </body>
</html>

これは使える....