Forem

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

Posted on • Edited 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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay