続・MithrilのチュートリアルをTypeScriptで写経してみる #TypeScript

前回まで

前回TS2345が発生していた以下の箇所を修正してみました。手探りで修正したので誤りがあるかもしれません。ご了承ください。

app.ts

m.mount(document.getElementById("root"),  {controller: controller, view: view});

エラーの内容はコンポーネントとして渡しているオブジェクトの型が一致していないという事なので、controllerとviewの型を明示してみます。

修正前に

import追加しています。
[追記15/12/03]インポート不足があったので追加しました。

app.ts

import MithrilController = _mithril.MithrilController;
import MithrilVirtualElement = _mithril.MithrilVirtualElement;

controllerの修正

mithril.d.tsを読み解くと、どうやらcontrollerはMithrilControllerFunction型である必要があるらしい。以下の様なインターフェースとして定義されている。

mithril.d.ts

interface MithrilComponent<T extends MithrilController> {
    /**
    * The component's controller.
    *
    * @see m.component
    */
    controller: MithrilControllerFunction<T> |
        MithrilControllerConstructor<T>;

    /**
    * Creates a view out of virtual elements.
    *
    * @see m.component
    */
    view(ctrl: T): MithrilVirtualElement;
}

interface MithrilControllerFunction<T extends MithrilController> {
    (): T;
}

とりあえず引数なしで、何らかの型の値を返せば良いことがわかります。こんな感じに修正してみます。

function controller<T>(): T {
  todoVM.init();
  // 今回は返すものが無いのでnullにしてみる。いいのかな？
  return null;
}

C#に慣れ親しんだ者としてはジェネリック型をJavaScript上で見るのは新鮮ですね。

viewの修正

先程と同じくこちらもmithril.d.tsで確認してみると、こんな感じです。

mithril.d.ts

interface MithrilComponent<T extends MithrilController> {
    /**
    * The component's controller.
    *
    * @see m.component
    */
    controller: MithrilControllerFunction<T> |
        MithrilControllerConstructor<T>;

    /**
    * Creates a view out of virtual elements.
    *
    * @see m.component
    */
    view(ctrl: T): MithrilVirtualElement;
}

何かしらの型の引数（というかコントローラーですね）を取り、MithrilVirtualElementを返す関数である必要があるわけですね。

app.ts

var view = (ctrl: MithrilController): MithrilVirtualElement => {
  return m("html", [
    m("body", [
      m("input", {onchange: m.withAttr("value", todoVM.description), value: todoVM.description()}),
      m("button", {onclick: todoVM.add}, "追加"),
      m("table", [
        todoVM.todoList().map((task: Todo, index: number) => {
          return m("tr", [
            m("td", [
              m("input[type=checkbox]", {onclick: m.withAttr("checked", task.done), checked: task.done()})
            ]),
            m("td", {style: {textDecoration: task.done() ? "line-through" : "none"}}, task.description()),
          ])
        })
      ])
    ])
  ]);
};

本来であればコントローラーもクラス化して、それをviewの引数の型にしていするべきなのかもしれません。

変更後のソース全体

app.ts

/// <reference path="../typings/mithril/mithril.d.ts" />
import MithrilProperty = _mithril.MithrilProperty;
import MithrilVirtualElement = _mithril.MithrilVirtualElement;
import MithrilController = _mithril.MithrilController;

/**
 * Model
 */
class Todo {
  description: MithrilProperty<string>;
  done: MithrilProperty<boolean>;

  constructor(description:string) {
    this.description = m.prop<string>(description);
    this.done = m.prop<boolean>(false);
  }
}
//ビュー・モデルは表示されているTodoのリストを管理し、
//作成が完了する前のTodoの説明を格納したり、
//作成が可能かどうかを判定するロジックや、
//Todoが追加された後にテキスト入力をクリアする責務を持つ
namespace todoVM {
  //新しいTodoを作成する前の、入力中のTodoの名前を保持するスロット
  export var description: MithrilProperty<string>;
  //アクティブなTodoのリスト
  export var todoList: MithrilProperty<Todo[]>;
  //export var done: MithrilProperty<boolean>;
  /**
   * 初期化
   */
  export function init () {
    todoVM.todoList = m.prop<Todo[]>([]);
    todoVM.description = m.prop<string>("");
    //todoVM.done = m.prop<boolean>(false);
  }

  /**
   * Todoの追加をしてdescriptionをクリア
   */
  export function add () {
    if (description()) {
      todoVM.todoList().push(new Todo(description()));
      todoVM.description("");
    }
  }
}
/**
 * Controller
 * コントローラは、モデルの中のどの部分が、現在のページと関連するのかを定義している
 * この場合は１つのビュー・モデルですべてを取り仕切っている
 */
function controller<T>(): T {
  todoVM.init();
  return null;
}

/**
 * View
 * @returns {any}
 */
var view = (ctrl: MithrilController): MithrilVirtualElement => {
  return m("html", [
    m("body", [
      m("input", {onchange: m.withAttr("value", todoVM.description), value: todoVM.description()}),
      m("button", {onclick: todoVM.add}, "追加"),
      m("table", [
        todoVM.todoList().map((task: Todo, index: number) => {
          return m("tr", [
            m("td", [
              m("input[type=checkbox]", {onclick: m.withAttr("checked", task.done), checked: task.done()})
            ]),
            m("td", {style: {textDecoration: task.done() ? "line-through" : "none"}}, task.description()),
          ])
        })
      ])
    ])
  ]);
};


window.onload = () => {
  m.mount(document.getElementById("root"),  {controller: controller, view: view});
};

感想

TypeScriptいいですね。JavaScript書いていてモヤッとする型の部分がクリアになっていく感じがたまりません。どんどんC#風味になっていくので今後も期待です。WPFみたいなフレームワークがTypeScriptで動けばなぁと夢想してます。 Silverlight？ウッ…頭がッ…！