'children' is of type 'unknown'.js(18046)

[Theonlyhamstertoh]

Hi! I am trying to play around with Svelte 5. I am trying to replace slot with @render children() instead but it throwing me the type error 'children' is of type 'unknown'.js(18046). What can I do in typescript to fix this?

// button.svelte

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

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

Dependencies

	"@sveltejs/adapter-auto": "^3.0.0",
	"@sveltejs/kit": "^2.0.2",
	"@sveltejs/vite-plugin-svelte": "^3.0.1",
	"svelte": "5.0.0-next.26",
         ...

[Angus-Paillaugue]

I am unfamiliar with Typescript but in the documentation, there is an explanation about typing the props :

let { a, b, c, ...everythingElse } = $props<MyProps>();

[YoonHan]

I think the documentation is a little bit outdated.
$props() cannot take type argument anymore.
As of the time of writing, the only possible solution might be to do typings manually 😢

[minblake]

I think you can do this now

<script lang="ts">
  import type { Snippet } from 'svelte'

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

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

[ayazemre]

When you want to specify some props with types and use rest syntax it gives type errors on rest syntax, any workarounds at the moment?

[iDefyU]

try this
let { children }: { children: Snippet } = $props();

works for me

[dummdidumm]

<script lang="ts">
  import type { Snippet } from 'svelte'

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

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

[oghaAI]

This now gives the following ts error
Argument of type 'Snippet<[]>' is not assignable to parameter of type 'unique symbol & { _: "functions passed to {@render ...} tags must use the Snippet type imported from \"svelte\""; }'. Type 'Snippet<[]>' is not assignable to type 'unique symbol'.ts(2345)

changing this to below works.

<script lang="ts">
	import type { ComponentProps, Snippet } from 'svelte';
       //  let { children }: { children: Snippet } = $props()
	let { children }: ComponentProps<any> = $props();
</script>
{@render children()}

Is this the right fix?