Open
1

TypeScript Tips

EventTargetHTMLElement として型安全に扱う

EventTargetwindowdocument を含むので、絞り込む必要がある。

export class AnchorOver {
  private targets: HTMLAnchorElement[]

  constructor() {
    this.targets = [...document.querySelectorAll('a')].filter(
      (item) => item.dataset.color,
    )
    this.overHandle = this.overHandle.bind(this)
  }

  start() {
    this.targets.forEach((el) => {
      el.addEventListener('mouseenter', this.overHandle)
    })
  }

  overHandle({ target }: MouseEvent) {
    if (!(target instanceof HTMLAnchorElement)) return
    console.log('🖱 mouseenter', target && target.dataset)
  }
}
作成者以外のコメントは許可されていません