TypeScriptでダイアログを表示 Uncaught TypeError: r(...).dialog is not a functionの対策

TypeScriptでダイアログを表示する。

また実装の際にUncaught TypeError: r(...).dialog is not a functionが出たのでその対策の備忘録とする。

事前に下記コマンドでjQueryをインストールする。

npm i --save-dev @types/jquery

サンプル

  private test(): void {
    //jQueryを別の変数「j」で定義する。
    var j = jQuery.noConflict(true);

    //以降は、$を「j」に変換して使用する。
    var hoge = j("<div></div>").dialog({ autoOpen: false });

    hoge.html("テスト");

    hoge.dialog("option", {
      title: "テストタイトル",
      width: 600,
      height: 400,
      modal: true,
      zIndex: 1000,
      buttons: {
        "閉じる": function () { j(this).dialog("close"); },
      }
    });
  }