Mithril.jsをTypescript2.xで書いてみよう
はじめに
この記事は、Mithril.js Advent Calendar 2016の18日目のエントリです。
17日目 > shibukawaさんのMithrilで自動補完つきテキストを作る(2)です。
19日目 > tacnomaさんのMithrilからRailsサーバーへのファイルアップロードではまった部分です。
@type/mithriljs
Mithril.jsでTypeScriptを使う場合、以前であれば、typingsで型定義ファイルを取得する必要がありましたが、 TypeScript2.0からは、npmの@types/mithrilで取得できるようになりましたので、
npm install @types/mithril -D
で、他の依存と同じように管理できるようになったことでだいぶ楽になりました。
書いてみた
以前から書いていたのを、今回のエントリを書くにあたり、いろいろ機能追加やバージョンアップをしました。
Mithril.jsでTypeScriptを使うときの特徴としては、やはり型の制約が出てくるところです。
特にm.requestで返ってくるのが、Mithril.Promise<any>になるので、そのままではTypeScriptの世界にanyをばらまいてしまうので、
クラスを用意しマッピングする必要があります。
さらに、JavaScriptでは使えていたmapなどのメソッドが使えないので、m.deferredを駆使して、Promiseの世界でやりとりする必要があります。
また、ComponentがControllerを要求するので、クラスを作るかinterfaceをキャストしてあげる必要があります。
その他にも、いろいろと型を合わせる必要が出てくるので、ひたすらTypeScript compilerの指摘を受けつつ試行錯誤することになると思います。
新しくTypeScript 2.0で使えるようになった機能は、今後勉強も兼ねて書き直していければと思ってます。
いろいろ依存関係をバージョンアップする関係で、yarnpkgで依存管理をするようにしました。 デプロイには、CircleCIを利用していますのでCircleCIでyarnを使うを参考にさせていただきました。
おわりに
普段の業務では、AngularJS + TypeScriptをメインで書くことが多いのですが、 やはり覚えることが多いのと、JavaScriptが前提になっている記事やコードをTypeScriptへ変換するにはどうしたら良いのかを考える必要が出てきてしまうので、 学習に時間がかかりますね。
その点、Mithril.jsははじめに覚えるAPIの少なさと、そこから深く学ぶには何が必要なのかが全て公式に揃っているのが、とてもありがたいです。 特に日本語のサイトが、公式に追従してくださっているお陰で、敷居がだいぶ下がっていると思います。
次の1.xはより洗練されたものになると思いますので、とても楽しみです。
