読者です 読者をやめる 読者になる 読者になる

TypeScript で jQuery のプラグインを書く

jQuery のプラグインを書くお作法みたいのがあって、だいたいどのプラグインも以下のように書かれている

(function($) {
  $.fn.myPlugin = function() {
      ...
  };
}) (jQuery);

これTypeScriptで書こうと思ったらこんな感じになった。

/// <reference path="path/to/jquery.d.ts" />

module jQuery {
  var $:JQueryStatic = <JQueryStatic>jQuery;

  $.fn.myPlugin = function() {
      ...
  };
}

jQuery モジュールを定義すると外側の即時関数は大体同じにコンパイルされる。
ただしこうすると jquery.d.ts の jQuery の定義を上書きしてしまうらしいので、$ に型アノテーション付きで jQuery を代入する。コンパイル結果は以下のようになって、だいたいお作法どおりになる。

var jQuery;
(function (jQuery) {
  var $ = jQuery;
  $.fn.myPlugin = function () {
    ...
  };
})(jQuery || (jQuery = {}));

モジュールとして宣言した jQuery をキャストするの気持ち悪くない?

気持ち悪いと思う。
だから最初外側の即時関数ぶぶんそのままでいいじゃんと思ったのだけれど、TypeScript では関数の内部にクラスを宣言できないっぽい。

(function($) {
  $.fn.myPlugin = function() {
      ...
  };
  ...
  class Hoge { // コンパイルエラー
    ...
  }
}) (jQuery);

自分のプラグインで使うクラスを定義したかったのでちょっと変なキャストするしかないのではないかと思った。なにか他にいい方法あったら誰か教えて下さい。