Typed Event Emission in Svelte with Generics

[Kayoshi-dev]

(Moved in Svelte repo)

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