JSXに「このオブジェクトはfooを持っているはず」と教えるには

まあ、jQueryオブジェクトがcssってメンバを持っていることをJSXは知らないので教えたかったわけです。

まずnative classを作ったがこれは間違い。

...
        var t = this._v as __noconvert__ jQueryNative;
        t.css(a1, a2);
...
native class jQueryNative {
    function css(a1:string, a2:string) : void;
}

なぜならnative classは「JSの他の部分で定義されているjQueryNativeってオブジェクトにはこんな属性があるよ」と宣言するものなので、これでは実行時に「jQueryNativeなんてないぞ(Uncaught ReferenceError: jQueryNative is not defined)」ってエラーになってしまうわけだ。

で、次に考えたのがinterfaceを使う方法。

...
        var t = this._v as __noconvert__ jQueryNative;
        t.css(a1, a2);
...
interface class jQueryNative {
    function css(a1:string, a2:string) : void;
}

これは型チェックのアサーションで実行時に止まる。

if (! (v === null || v instanceof jQueryNative)) {
        debugger; ...

つまり、jQueryNativeと継承関係にないものをキャストしてjQueryNativeと同じメンバを持っていると教えることはできない。

で、正解はこれ

native __fake__ class jQueryNative {
    function css(a1:string, a2:string) : void;
}

これを使うと単なるnative classと違ってjQueryNativeが作られる…と思ったら大間違いで「作られて、キャストされた」かのように型チェックをしないコードが出力される。

// 元のコード
        var t = this._v as __noconvert__ jQueryNative;
        t.css(a1, a2);

// 生成されるコード
        /** @type {jQueryNative} */
        var t;
        t = this._v;
        t.css(a1, a2);
    • -

というわけでJSXでjQueryの.cssが動くようになった