Name: Typing Component Events in Svelte
Rating: 2.1 (6202 reviews)
Author: hnrq

Typing Component Events in Svelte

Henrique Ramos - Aug 30 '23 -

- Dev Community

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']) => {// ...};