Typed Event Emission in Svelte with Generics

[Kayoshi-dev]

Hello everyone,

While upgrading my components to use the new Generics syntax (Svelte Docs), I ran into an issue:

I have two components:

• List.svelte
  • The selectedItem state is a store that is shared with the ListItem using the context
  • Emits an onchange event whenever the selected item changes.
  • The event should return an item of the same type as the value passed to the ListItem's item prop.

However, I am currently getting a type unknown for my onchange parameter.

It looks like the type is not correctly infered because of the usage of the setContext/getContext.

<script lang="ts" generics="Item">
  interface Props<Item> {
    children: Snippet;
    onchange: (item: Item | null) => void;
  }

  let { children, onchange }: Props<Item> = $props();

  let selected: Writable<Item | null> = writable(null);

  setContext<Writable<Item | null>>("item", selected);

  selected.subscribe((value: Item | null) => {
    onchange(value);
  });
</script>

• ListItem.svelte
  • Receives an item as a prop.

<script lang="ts" generics="Item">
  type Props<Item> = {
    children: Snippet;
    item: Item;
  };

  const { children, item }: Props<Item> = $props();

  const itemSelected: Writable<Item | null> = getContext("item");

  const setItemSelected = (item: Item) => {
    if ($itemSelected === item) {
      itemSelected.set(null);
    } else {
      itemSelected.set(item);
    }
  };
</script>

Here’s how I’m using these components:

<script lang="ts">
  import List from "$lib/List.svelte";
  import ListItem from "$lib/ListItem.svelte";

  let selected: string | null = $state(null);

  const simpleArray = ["1", "2", "3"];
</script>

<List onchange={(e) => (selected = e)}>
  {#each simpleArray as item}
      <ListItem {item}>
        <p>Item {item}</p>
      </ListItem>
  {/each}
</List>

Is there a way to specify the expected type in Svelte, ensuring that the onchange event correctly infers the type of the selected item?

Something like <MyComponent<string>> or another generic-friendly syntax that I may not be aware of?

Any guidance would be greatly appreciated!

Here’s a reproducible sandbox:
https://codesandbox.io/p/github/Kayoshi-dev/sample/main

[webJose]

As you've written your Props type for the List component, the component can only infer the element's type through strong typing of the function you provide as the onchange handler. Since you're not passing a strongly-typed function, the type cannot be inferred.

Try:

<List onchange={(e: string) => (selected = e)}>
  {#each simpleArray as item}
      <ListItem {item}>
        <p>Item {item}</p>
      </ListItem>
  {/each}
</List>

Also, unrelated but I figured I should say: If you do custom events in all lowercase, your names might collide with standard events. Sure, you currently have no issues, but if in the future you want to spread props onto an HTML element, that might cause a problem. My personal decision has been to use camel casing for all custom events.

Anyway, back on topic: Let me know if my proposal fixed your issue.