How to use modifiers in events with typescript?

[funny-family]

🧐 Problem Description

I know that I need to use withModifiers function to apply modifiers to event, but I find out that in some cases I have to use different events.

💻 Sample code

"Event Modifiers" in Vue3 template	"Event Modifiers" after compilation
@click.stop=""	onClick: _withModifiers(() => {}, ["stop"])
@click.prevent	onClick: _withModifiers(() => {}, ["prevent"])
@click.capture=""	onClickCapture: () => {}
@click.self=""	onClick: _withModifiers(() => {}, ["self"])
@click.once=""	onClickOnce: () => {}
@click.passive=""	onClickPassive: () => {}

In my opinion with looks very strange and not clean at all. Also I cannot use normaily events such as onClickCapture, onClickOnce and onClickPassive with typescript.

Type '{ onClickOnce: (event: Event, ...args: unknown[]) => any; class: string; }' is not assignable to type 'ElementAttrs<HTMLAttributes>'.
  Property 'onClickOnce' does not exist on type 'ElementAttrs<HTMLAttributes>'.ts(2322)

🚑 Other information

Vue 3 Template Explorer (with my example)

[funny-family]

Solution is here.