+ JavaScript の質問用スレッド vol.126 + [転載禁止]©2ch.net (739ﾚｽ)
上下前次1-新
380(6): 2023/04/03(月)20:28 ID:??? AAS
【環境】VS Code
バージョン: 1.77.0
Electron: 19.1.11
Chromium: 102.0.5005.196
Node.js: 16.14.2
V8: 10.2.154.26-electron.0
OS: Linux x64 5.4.0-42-generic
【何をしたのか】イベントリスナー内でevent.target.valueを参照した。
【エラーメッセージ】プロパティ 'value' は型 'EventTarget' に存在しません。ts(2339)
【サンプルコード】
省11
381(1): 2023/04/03(月)21:47 ID:??? AAS
>>380
エラーが消えたからヨシ！は好ましくない
まずはts(2339)で検索してみよう
382(1): >>380 2023/04/03(月)22:22 ID:??? AAS
>>381
エディタ上でts(2339)が出ていてもブラウザ上での実行は問題なくできます。
キャストするとts(2339)が消えますが、「型アサーション式は TypeScript ファイルでのみ使用できます。ts(8016)」が発生します。
ブラウザで実行すると、「Uncaught SyntaxError: Unexpected identifier 'as' (at hoge.html:24:35)」が発生します。（TypeScriptの構文なので当然ですが……）
fruit === event.target;はtrueなので置き換えたのですが、トラップや問題はありますか。
（エディタ上のts(2339)も消えるし実行もできるので、落とし穴がなければこれで行きたいな、と）
383(1): 2023/04/03(月)22:36 ID:??? AAS
>>382
そもそもTypeScriptを書こうとしてるわけじゃないのになんでtsエラーが出てるの？ってこと
vscode右下の言語モードがTypeScriptになってるんじゃないの？
384(2): 2023/04/03(月)23:01 ID:??? AAS
>>383
なってないです。拡張機能も無効です。
i.imgur.com/TE6gwcY.jpg
385(1): 2023/04/03(月)23:26 ID:??? AAS
>>384
うちではTSでは出るけどJSでは出ない
画像ﾘﾝｸ[png]:i.imgur.com
画像ﾘﾝｸ[png]:i.imgur.com
おそらく何かvscode側の問題だろう
で、エディタの問題ならなおさらfruit.valueで解決とするのは悪手
386(1): 2023/04/03(月)23:39 ID:??? AAS
>>384
わかった、vscodeの設定に↓があるんじゃない？
"js/ts.implicitProjectConfig.checkJs": true
これ追加したらうちでもJSでエラー出た
387(2): >>380 2023/04/03(月)23:48 ID:??? AAS
>>385 >>380
原因が判明しました。"js/ts.implicitProjectConfig.checkJs"がtrueでした。
型のチェックはしたいので、event.target.valueの上に@ts-ignoreを書いて解決します。
ありがとうございました。
388: >>380 2023/04/03(月)23:51 ID:??? AAS
>>386
まさにそうでした。ありがとうございました。
389(2): 2023/04/04(火)00:27 ID:??? AAS
jQuery では、event.target.value でも、正常に動く
<div id="btn-wrap">
<button class="BtnA BtnAll" value="1">A-1</button>
<button class="BtnA BtnAll" value="2">A-2</button>
<button class="BtnB BtnAll" value="3">B-3</button>
</div>
<div id="btn-wrap-2">
<button class="BtnC BtnAll" value="11">C-11</button>
</div>
$( function ( ) {
省11
390(1): 2023/04/04(火)00:53 ID:??? AAS
>>387
@ts-ignoreもなんか負けたみたいでいやだけども調べてみてもいい解決策はなさそう
致し方なしかな
>>389
正常に動くかどうかの話はしてないよ
よく読もう
391(1): 2023/04/04(火)10:04 ID:??? AAS
fruitがHTMLSelectElementなのは確定してるから
event.currentTargetがHTMLSelectElementであることは推定できそうだな
event.target じゃなくて event.currentTarget にしたらどうなるかね
392(2): 2023/04/04(火)10:48 ID:??? AAS
>>387
型チェック入れるとか
if (null === event.target || !(event.target instanceof HTMLSelectElement)) { return; }
キャストするとか
console.log(/** @type {HTMLSelectElement} */ (event.target).value);
393(1): 2023/04/04(火)11:43 ID:??? AAS
>>392
そのへん少し試したけどうまくいかなくて諦めてた
致し方なしとか言う前にもう少し手を尽くすべきだった
反省
394: >>380 2023/04/04(火)19:16 ID:??? AAS
>>391
currentTargetもts(2339)が発生します
>>392
元々、nullチェックは'event.target' は 'null' の可能性があります。ts(18047)のエラーを消すために入れていたのですが、
条件を!(event.target instanceof HTMLSelectElement)に書き換えてもts(18047)とts(2339)は発生しないので、解決しました。
JSDocコメントでのキャストは気づきませんでした、こちらが適している場面があればこちらも利用していきます。ありがとうございました。
>>390 >>393
そうなんです、@ts-ignoreを使用している行で他のエラーが出た時に気づけなくなるので、あまり使用したくないです。
遅い時間までお付き合いいただき、ありがとうございました。
ところで、event.targetの代わりにfruitを使用すべきではない明確な理由はないが、event.targetを使用するのが(通常|普通|無難)である。ということで合っていますか。
395(1): 2023/04/04(火)22:54 ID:??? AAS
1つのイベントハンドラが複数の要素に対して設定されることは一般的で、その場合はevent.targetを使うことになる
今回のケースはそうでないにしても、可搬性や拡張性を考えれば常にevent.targetを使用しておくという判断は妥当だろう
あと処理結果は同じでも、イベントの起こった要素に対して処理をする、という意図をコードに残す意味もある
いずれにしろ現時点のそのコードだけを考えるならお好きなように
396: >>380 2023/04/05(水)00:34 ID:??? AAS
>>395
確かに以下のような場合にはEvent.targetを使う必要があるし、「意図をコードに残す」にとても合点がいきました。
<button data-x="1">btn1</button>
<button data-x="2">btn2</button>
const btns = document.querySelectorAll('button');
for (const b of btns) {
b.addEventListener('click', e => console.log(e.target.dataset.x));
}
397: 389 2023/04/05(水)10:13 ID:??? AAS
>>389
に書いた
複数のコントローラーに、イベント登録する場合、
外側・親に、イベントを付けて、親側で子のイベントをキャッチする
398: 2023/04/05(水)11:14 ID:??? AAS
このjQuery信者は文脈や論点ってものを全く理解しないのな
jQueryでは～jQueryなら～ってただただ念仏を唱えて布教に励む様子がまさに信者
399: 2023/04/05(水)13:56 ID:??? AAS
Slickで出来てSwiperでできないようなアニメーション処理って何かある？
上下前次1-新書関写板覧索設栞歴
あと 340 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.012s