v-onディレクティブで紐づけた「イベントハンドラ」や「トランジションフック」の引数から要素ノードのプロパティを参照、アクセスしようとするとTypeScriptではエラーが出てしまいます。そこで引数のダウンキャストが必要なのですが、「イベントハンドラ」と「トランジションフック」でそれぞれキャストの方法が違うので順番に説明します。

v-onディレクティブで紐づけた「イベントハンドラ」や「トランジションフック」の引数から要素ノードのプロパティを参照、アクセスしようとするとTypeScriptではエラーが出てしまいます。そこで引数のダウンキャストが必要なのですが、「イベントハンドラ」と「トランジションフック」でそれぞれキャストの方法が違うので順番に説明します。
はじめに Nuxt.js + TypeScriptを今試し中なのだけど、TypeScriptでのイベントの取り扱いが面倒なので、とりあえずStructural Subtypingを適用してみました。 今のところ問題なさそうなんだけど、軽く探して見た限りだとあまり類似のアプローチ無いし悪手なのかな? てか、FWとか一般的なライブラリで対応してるけど見つけれてないだけの気がしてならない。。。 TL;DR Event型を取り扱うときはtargetの型が不明なのでコンパイルエラーになる事がある event: { target: HTMLButtonElement }型を指定するのが一番手っ取り早い 求む、もっと手軽な対応方法 TypeScriptでのEvent型の取り扱いの罠 クリックイベントが発生したHTMLのノードに対して作業したい事は良くあるかと思います。 例えば下記のように 「クリックした
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く