PolymerとTypeScriptの相性が悪い

2015/10/16時点での所見をまとめておく

TypeScriptで書く

pros

• TypeScriptに慣れてる
• ES6 classが使える

現状

"use strict";

export default class HelloWorldComponent {
  is: string;

  beforeRegister() {
    this.is = "hello-world";
  }
}

Polymer(HelloWorldComponent);

cons

• HTMLファイル中に直接書けないのでファイルが分離される(設計上どうかは別にしてロジックを書きながらテンプレートが見れないのは不便)
• Polymer(というかCustom Elements)の設計がTypeScriptと噛み合ってない

Polymerの型

• Polymer() に渡すのはプロトタイプである。(JavaScriptのprototypeではない)
• Polymer() に渡すのは実装全体ではなく一部
• Polymer() に渡した後desugar(解糖)され、Polymerが提供する多数のbehaviorとmixinされる
• ↑の理由により、プロトタイプの時点と実行時に自身が持つメンバが違う
• ↑の理由により、PolymerのプロトタイプをTypeScriptのclassにするとthis.でPolymerのAPIが使えない
• Polymerは動的にフィールドを増やすことが多々あるので interfaceでのチェックの意味が薄い

理想

こうしたい

"use strict";

export default class HelloWorldComponent extends polymer.BaseClass {
  beforeRegister() {
    this.is = "hello-world";
  }

  ready() {
    this.$.name.textContent = "foo";
  }
}

Polymer(HelloWorldComponent);

polymer.d.tsは今のところ純粋にPolymerの実装に型を与えただけで、インタフェース以外は提供していない。classはPolymer本家に実装されていないので、それやっちゃうと型定義じゃなくてライブラリになっちゃうかなあと思っている。

ところで PolymerTS というライブラリがある

github.com

Decoratorも使いまくってAPIはけっこういい気がするんだけど、作者がVisualStudioで書いてるっぽくてリポジトリの汚いのとコードの書き方が相容れないのでコントリビュート意欲を削ってくる。こんな感じのもうちょっと薄くて自分が使いやすいライブラリを作る予定ではあるがなかなか時間と体力がない。今年中にやりたい。