1. ホーム
  2. javascript

[解決済み] Angular2のイベントはどのようなTypescriptタイプなのか

2022-09-12 10:51:57

質問

htmlファイル内に以下のようなボタンがある場合

<button (click)="doSomething('testing', $event)">Do something</button>

また、対応するコンポーネントの中に、このような関数があります。

doSomething(testString: string, event){
    event.stopPropagation();
    console.log(testString + ': I am doing something');
}

に割り当てるべき適切な型はありますか? $event 入力に割り当てるべき適切な型はありますか? イベントパラメータ自体はオブジェクトですが、これを型オブジェクトに代入すると、エラーが発生します。

property 'stopPropogation' はtype objectに存在しません。

では、Typescript は何をもって $event の入力をどう考えるか?

どのように解決するのですか?

AlexJ氏の提案のように

あなたが通過したイベント $event は DOM イベントであるため、DOM イベントでない場合は EventName を型として使用します。

あなたの場合、このイベントは MouseEvent であり、ドキュメントによると、引用

MouseEvent インターフェースは、ユーザーがポインティングデバイス (マウスなど) を操作することによって発生するイベントを表します。このインタフェースを使用する一般的なイベントには click、dblclick、mouseup、mousedown .

これらのすべての場合において、あなたは MouseEvent .

別の例:次のようなコードがあった場合

<input type="text" (blur)="event($event)"

イベントが発生したとき、あなたは FocusEvent .

イベントをコンソールログに記録すると、このようなメッセージが表示され、イベント名が表示されます。

FocusEvent {isTrusted: true, relatedTarget: null, view: Window, detail: 0, which: 0…}

ドキュメントを参照すれば、いつでも既存の イベント .

Edit

また、TypeScriptのチェックもできます。 dom.generated.d.ts をクリックすると、すべての型付けが移植されます。あなたの場合 stopPropagation() の一部である Event によって拡張され MouseEvent .