RxJSとはなんぞや?⑥ サイコロ連打の記録に挑戦②
前回は、fromEventによるチェンジイベントの発生の監視がうまく行かない所で終了です。
具体的には
"home.page.html"に
<ion-checkbox id="idStop" [(ngModel)] = "flgStop"></ion-checkbox>
と言うチェックボックスを追加し、これのオンオフを監視しようとした訳です。
おさらいですが、有るエレメント上のマウスの動きをイベントとしてとらえた場合の"Observable"を作成した場合のコードは
const mouseMoves = fromEvent<MouseEvent>(el, 'mousemove');
と言う感じです。
上のコードの<MouseEvent>と'mousemove'をどう変えるかと言う問題でしたが、VisualStudioCodeの機能『型定義に移動』で<MouseEvent>の型定義場所"C:\Users\ユーザー名\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\node_modules\typescript\lib\lib.dom.d.ts"を発見。
同じファイルに'mousemove'の定義場所(?)も見つけました。
そこから(他の記述の内容から推測して)チェックボックスのオンオフを監視するObservableを以下のように作成する事で機能はしました。
const StopDice = fromEvent<MouseEvent>(el, 'mouseup');
このファイルはタイプスクリプトの宣言一覧的な代物の様で、
『typescript globaleventhandlerseventmap 使い方』で検索した結果の
TypeScript Deep Dive 日本語版 | lib.d.ts
https://typescript-jp.gitbook.io/deep-dive/type-system/lib.d.ts
にある程度情報載っていました。
ただ欲しいのは<MouseEvent>じゃなく<Event>の'change'なんですが、こちらがどうもうまく行かない。
今更ですが、TypeScriptもRxJSもビギナーに優しくないですね。
明日、また挑戦します。投稿