Type Safety in Implicit #snippet props

[Keshav-writes-code]

so, svelte docs says that you can pass snippets inside a component, and they can be used my destructuring the object returned by $props()

<script>
	let { children } = $props();
</script>

<button>{@render children()}</button>

but when setting lang='ts', along with other normal props, svelte gives the type error that Property 'children' does not exist on type '$$ComponentProps'.

<script lang="ts">
	let { children, other_prop }:{other_prop: any} = $props(); // Property 'children' does not exist on type '$$ComponentProps'. [2339]

</script>

<!-- result will be <button>click me</button> -->
<button>{@render children()}</button>

[brunnerh]

If you declare types, you also have to declare children. Not every component accepts this property, so it has to be added manually for those that do.

import type { Snippet } from 'svelte';

interface Props {
    children: Snippet;
    // ...
}
let { children, /*...*/ }: Props = $props();

(If you are wrapping an element, you can make the props extend an interface from 'svelte/elements', those already include the children property.)