Typing Component Events in Svelte

#svelte #beginners #typescript

Svelte allows the creation of custom events for a component. When using it with TypeScript, it is also possible to add types that makes it easier to know which event can be listened to and its details.

The event dispatcher

import { createEventDispatcher } from 'svelte';
interface ComponentEvent {
  toggle: null;
  edit: { value: string; };
};

const dispatch = createEventDispatcher<ComponentEvent>();

const onToggle = () => dispatch('toggle');
const onEdit = (value: string) => dispatch('edit', { value });

The event listener

import Component from '$lib/components/Component.svelte';
import type { ComponentEvents } from 'svelte';


const handleEdit = (event: ComponentEvents<Component>['edit']) => {// ...};