Web Componentsで作ったオリジナルコンポーネントを型宣言で使いやすくする

declare global {
  // 既存のHTMLElementTagNameMapをinterfaceによって拡張する
  // これによりタグ名を指定するときに補完が効く
  interface HTMLElementTagNameMap {
   // my-elementというタグ名でMyElementというWebComponentを追加
    "my-element": MyElement; 
  }

 // 既存のHTMLElementEventMapをinterfaceによって拡張する
 // これによりaddEventListenerしたときにevent名の補完が効く
  interface HTMLElementEventMap {
    // 既存のevent名と被らない名前で追加すること(他タグなども影響を受けるため)
    "my-change": Event;
  }
}

const myElement = document.createElement("my-element") // ここで補完が効く
myElement.addEventListener("my-change", (event) => { // ここで補完が効く
  console.log(event);
});