JQueryプラグインを使う

Jquery plugin

プラグインの例 jquery.hoge.js

(function ($) {
    $.fn.hoge = function () {
        return $("p").click(function () {
            console.log("test!");
            $(this).text("hello!");
        });
    };
})(jQuery);

これをjqueryとともにhtml側で読み込んでおく。

タイプスクリプトから読み込むには インターフェースを定義して、JQueryのメソッドに追加するファイルを用意しておく。

jquery.hoge.t.ds

interface Hoge {
    hoge:() => JQuery<HTMLElement>;
}

interface JQuery extends Hoge {

}

これで使える。

$("p").hoge();

使用例

html

<link rel="stylesheet" type="text/css" href="./jQuery.NumPad-master/jquery.numpad.css">
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jQuery.NumPad-master/jquery.numpad.js"></script>
<script type="text/javascript" src="./usejq.js"> </script>

型定義 jQuert.Numpad.d.ts

interface NumPadPlugin {
    numpad:(option:{
        textDone?:string,
        onChange?:(event:Event, value:string) => void
    }) => JQuery<HTMLElement>;
}

interface JQuery extends NumPadPlugin {

}

呼び出し

$(".inputCell").numpad(
    {
        textDone:"Done?",
        onChange:(event, value) => {
            console.log(event);
            console.log(value);
        }
    }
)