DEV Community

Cover image for Typing Component Events in Svelte
Henrique Ramos
Henrique Ramos

Posted on • Updated on

Typing Component Events in Svelte

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 });
Enter fullscreen mode Exit fullscreen mode

The event listener

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


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

Top comments (0)