JSXであったらいいなメモ(2014/04版)

anonymous_class.rst

無名クラス導入？

JavaScriptのラッパーをJSXで書いていて困るのが、自由奔放なObjectを受け取るメソッド。ちょっと前の更新で、Map.<variant>で書いておけば、オブジェクトのvalueに数値だけ、文字列だけのオブジェクトを受け取れるようにはなったので、タイプ数は減ってコードは大分見やすくなったけど、問題はまだ残っている気がする。

1. オブジェクトが、特定のキーを受け付けたい場合。また、キーごとにオブジェクトの型が決まっている場合。
2. オブジェクトがメソッドを受け取るケース

1. オブジェクトが、特定のキーを受け付けたい場合。また、キーごとにオブジェクトの型が決まっている場合。

http://esprima.org/doc/index.html

esprima.parse('var answer = 42;' {
    loc: true,
    tokens: true
});

esprimaの場合は、loc、tokensなど、あるキーのみを受け付ける。キーをタイプミスすると誰も実行結果がおかしくなるだけでコンパイルチェックなどは効かない。今でも、Optionクラスを作れば厳密なチェックができなくはないが、静的にテストできるとうれしいし、ラッパーを実装するのがちょい面倒。

https://github.com/shibukawa/esprima.jsx/blob/master/lib/esprima.jsx#L112

2. オブジェクトがメソッドを受け取るケース

Vue.directive('demo', {
    bind: function () {
        this.el.style.color = '#fff'
        this.el.style.backgroundColor = this.arg
    },
    update: function (value) {
        this.el.innerHTML =
            'argument - ' + this.arg + '<br>' +
            'key - ' + this.key + '<br>' +
            'value - ' + value
    }
})

関数を渡すのだけど、よくあるextendsメソッドで受け取るオブジェクトのように、関数オブジェクトが格納されていて、その中ではthisを使っているケース。このVue.jsの場合だと、メソッド名が決まっているので、function(self, 実際の引数) {}という関数オブジェクトを受け取って、.call(this, 引数)する代わりに、.call(null, this, 引数)してそれを呼び出すようなラッパー関数を渡すコードにすればまあできないことはないかもしれない。ただし、項目1と同じように型のチェックはできない。

解法案：無名クラス

こんなのができたらうれしいかも。

Vue.directive('demo', new VueDirectiveInterface {
    override function bind () : void {
        this.el.style.color = '#fff'
        this.el.style.backgroundColor = this.arg
    }
    override function update (value : string) : void {
        this.el.innerHTML =
            'argument - ' + this.arg + '<br>' +
            'key - ' + this.key + '<br>' +
            'value - ' + value
    }
});