New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
EventHandler type is missing important properties #11436
Comments
I believe this is intended? As for the TLDR: You most likely need to use |
I understand the difference between |
This is how interface Event {
constructor(DOMString type, optional EventInit eventInitDict = {});
readonly attribute DOMString type;
readonly attribute EventTarget? target;
... And if you define a handler function that is not inline, you will always have to type the arguments anyway. |
I don't quite understand what the issue is, exactly. However:
I believe you can. When using inline listeners, the types are set automatically. Otherwise, indeed, you need to set the types manually: // Either like this
const handler: EventHandler<InputEvent, HTMLInputElement> = (e) => { /* ... */ }
// Or like this (which I personally prefer because I like my functions to use the function keyword)
function handler(e: InputEvent /* & { currentTarget: HTMLInputElement } // only if I use currentTarget */) {
// ....
} If you do, all the types will be correct. You have access to all required values through if (e.target instaceof HTMLElement && e.target.dataset.something === "some-value") {
// ...
} As for:
I believe you can: // Component.svelte
<script>
let {
myProp = 3,
...restProps,
} = $props()
</script>
<div {...restProps}> ... {myProp} ... </div> And then: <Component onclick={listener} /> |
@brunnerh If we're following the spec, then shouldn't event objects also have a
Maybe we're misunderstanding each other, but this is not event delegation. What you've demonstrated is passing an event handler as a prop. Event delegation is when you set a handler on a parent element to capture/bubble the event if it originated from a child target. For example, if you're building a theme picker with I suppose in the meantime I could just do |
According to MDN,
Indeed, in React
Not even, you can use this, shorter variant: const value = (e.target as HTMLInputElement).value I also believe this code is more explicit - in TypeScript,
|
This is by design and a limitation of the type system which can't know what the target really was, and therefore TypeScript plays it safe. Therefore closing. You can read more about it here: https://stackoverflow.com/questions/28900077/why-is-event-target-not-element-in-typescript |
@rChaoz Oh, right, I don't know why I was trying to access My bad y'all. |
Describe the problem
Note: I couldn't find anything in the docs or on this repo about this issue.
EventHandler
is typed as follows:svelte/packages/svelte/elements.d.ts
Lines 42 to 44 in 1f9ad03
If I want to handle an
input
event with type safety, I have two options, neither of which is satisfactory:EventHandler<InputEvent, HTMLInputElement>
:FormEventHandler
:svelte/packages/svelte/elements.d.ts
Line 50 in 1f9ad03
Either way, the typing for
e.target
is incomplete:For some reason, only those three properties are available on the event target itself. Meaning I have to instead use
e.currentTarget
. But this means that unless I add the typings myself (which I shouldn't have to do), I can't implement event delegation or take advantage of event bubbling since I would always be reading values/properties off ofcurrentTarget
, which may not necessarily be the element that fired the event.Moreover, there is no
relatedTarget
available on any of these handlers. But it should be part of the types because it's a web standard.Describe the proposed solution
Better typing for
EventHandler
's properties. Most other frameworks like React/Solid/etc. have built-in types for these and allow you to access all relevant event target properties.Importance
would make my life easier
The text was updated successfully, but these errors were encountered: