Mithril 本の TypeScript のコードを いぢってみた

なんと Mithril 本が出ていました。凄い。 Mithril は、JavaScript のフレームワークです。

TypeScript のコードを見ていて型宣言に _mithril が使われていたのですが、アンスコで始まっているということはプライベート的な意味合いなので使わないほうが良いのかなと思い、少し修正してみました。また、内部モジュールの module も今後使わない方が良い感じなので class に置き換えてみました。any もなくした。

• オリジナルのコード

修正後のコード

• github
• diff

/// <reference path="../typings/mithril/mithril.d.ts" />

// モデルクラスTodo: 2つプロパティがある
class Todo {
    description = m.prop<string>(null);
    done = m.prop(false);
    constructor(description : string) {
        this.description(description);
    }
};

// コントローラ
class Controller {
    list = m.prop<Todo[]>([]);
    description = m.prop("");
    add = () => {
        if (this.description()) {
            this.list().push(new Todo(this.description()));
            this.description("");
        }
    }
}

// ビュー
function view(ctrl: Controller) {
    return m("div", [
        m("input", {onchange: m.withAttr("value", ctrl.description), value: ctrl.description()}),
        m("button", {onclick: ctrl.add}, "追加"),
        m("table", ctrl.list().map(function (task : Todo) {
            return m("tr", [
                m("td", [
                    m("input[type=checkbox]", {onclick: m.withAttr("checked", task.done), value: task.done()})
                ]),
                m("td", {style: {textDecoration: task.done() ? "line-through" : "none"}}, task.description())
            ]);
        }))
    ]);
}

m.mount(document.getElementById("root"), {controller: () => {return new Controller();}, view: view});

Mithril と TypeScript の組み合わせは結構良いと思うんですが、どうなんでしょう。