Typescript and createEventDispatcher

[b2m9]

HI there,

how can I give dispatched events types?

const dispatch = createEventDispatcher();
// ...
dispatch('eventName', { id: 'id123' , type: 'abc' }

What's the best way of telling Typescript that for dispatched events of type eventName, I expect a payload of id: string, type: string?

Any help is appreciated. 🙏

[mustofa-id]

Sound more Svelte than Kit.
You can type event name and detail like so: createEventDispatcher<{eventName: { id: string, type: striing }}>()

[b2m9]

Thanks for your reply!
Yes, it's a Svelte question because the Svelte repo doesn't have the discussions feature on 🤷‍♂️

I've reached that point as well but have two issues with it:

1. I need a dispatch instance for each event I want to dispatch
2. The payload (detail) is still optional

Any idea on how to address those issues?

[mustofa-id]

Yeah idk why, but there is Discord server for both Svelte & Kit.

If you need dispatch instance for multiple events, you can define multiple keys in type variable. I usually use interface like this:

interface ComponentEvent {
  event1: { foo: string }
  event2: { bar: number }
}

const dispatch = createEventDispatcher<ComponentEvent>()

I think payload is optional by design, idk how to make it required.

Btw, we can always look type definition by hovering or using some shortcut in modern IDE, I learnt by that. And it's bit difficult to me to explain in English cause I'm studying it now, let me know if you don't understand or make you confused.