【TypeScript】 $event.target.value を取得するどこでも使える最適解
typescriptはご存知の通り型(Class)を宣言しないといけないです。
numberやstringなら簡単ですが、HTMLInputElementのValueならどうでしょうか？しかも、多くの場合$event.target.valueなどのかたちでdataを引き回すので、どのように型宣言すればいいのか分かりませんでした。
Reactの場合は以下のようなやり方もあるみたいですね。
しかし、それ以外の場合に困るので汎用的な解決方法です。
入力されたvalueをconsole.logで出すだけの簡易なメソッドを考えてみます。
これで怒られる理由は、$event.targetがnullである可能性があるからです。渡ってくる値が必ずHTMLInputElementとは限りません。
では、それを担保してあげればOKです。
public justOutputValue($event: Event): void {
if (!($event.target instanceof HTMLInputElement)) {
return;
}
console.log($event.target.value)
}
$event.targetがHTMLInputElementのinstanceでなければ処理をしない、としてあげればconsole.logに渡ってくるのは必ずHTMLInputElementのinstanceなので、
valueがあるはずというわけですね。
しかし、これでもまだ怒られるはずです。valueではなくvalueAsNumberで受け取りましょう。
public justOutputValue($event: Event): void {
if (!($event.target instanceof HTMLInputElement)) {
return;
}
console.log($event.target.valueAsNumber)
}
これで型安全に$event.target.valueを受け取り、渡せるようになりました。
