Property ‘myPlugin’ does not exist on type ‘JQuery‘.

jQuery のプラグインを TypeScript で作っている時に、件のエラーが出たので対応方法を紹介します。

ググると以下のような対応策が出てきます。同じ名前の interface を定義するとマージされるようですが、これだと JQuery の定義を上書きしてしまいました。

interface JQuery {
  myPlugin(): JQuery
}

$.fn.myPlugin = function (): JQuery<HTMLElement> {
  return this
}

Type 'JQuery<HTMLElement>' is not assignable to type 'JQuery'. というようなエラーが他の個所で出てくるようになりました。

もう少し調べてみると、JQuery インターフェースはグローバルに宣言しているのに対し、上記の方法ではモジュールのスコープに定義するため上書きされてしまうようです。(参考

declare global {
  interface JQuery {
    myPlugin(): JQuery
  }
}

正しい書き方はこちらでした。

今回はモジュールとしてコンパイルしてのでこのようになりましたが、素の TypeScript では declare global はいらないのかもしれません。機会があれば調査してみようと思います。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください