---
title: MacへTypeScriptインストールからjQueryでHello Worldまで
tags: []
categories: ["Programming", "JavaScript", "TypeScript"]
date: 2012-11-03T18:55:08Z
updated: 2012-11-04T12:43:19Z
---

## 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の場合は[こちら][1]。(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][2]で！

### 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>

これは使える....


<a href='/api/v1/files/00073/foo.png'><img src='/api/v1/files/00073/foo.png' /></a>


  [1]: http://nodejs.org/dist/v0.8.14/node-v0.8.14-x86.msi
  [2]: http://www.typescriptlang.org/Playground/