TypeScript 用 MVC Framework な TypeFramework を使ってみる

まずは npm でインストールします。

$ npm install -g typeframework-cli

新規プロジェクトを作成してフレームワークを起動します。

$ tfw new myTypeFramewarkProject && cd myTypeFramewarkProject && tfw start

新規プロジェクトのディレクトリ構成は以下で作成されます。

myTypeFramewarkProject

.
├── Gruntfile.js
├── app
│   ├── Global.ts
│   ├── controllers
│   │   └── HomeController.ts
│   ├── models
│   └── views
│       ├── index.ejs
│       └── layout.ejs
├── app.json
├── app.ts
├── node_modules
│   └── ...
├── package.json
└── public
    ├── css
    │   └── main.css
    ├── img
    └── js

新規に model を作成してみます。app/models ディレクトリに Book.ts を作成します。

app/models/Book.ts

/// <reference path="../../app.ts" />

class Book extends TF.Model {

    constructor(public title: string, public author: string, public publisher: string, public price: number) {
        super();
    }

}

app.addModel(Book);

app.ts に Book.ts へのリファレンスを追加します。

app.ts

/// <MODEL REFERENCES>
/// <reference path="app/models/Book.ts" />

Book モデルを追加してみます。

var book = new Book('TypeScript', 'Zeke Kievel', 'GitHub', 100);

book.save((err) => {
    // コールバック
});

Book モデルを更新してみる。

// id が 1 のデータを取得して author プロパティだけ値を書き変える。
Book.get(1).done((err, book:Book) => {
    book.author = '別の誰か';
    book.save((err) => {
        // コールバック
    });
});

TypeScript でスムーズに MVC なプロジェクトが始められそうで良い感じでした。