Svelte 5中children属性的正确TypeScript类型是什么？

在Svelte 5里，children本质是一个返回可渲染内容的函数，你可以通过两种方式定义它的类型：

方式一：使用基础函数类型 #

直接用() => unknown作为类型，足够满足大部分场景：

<script lang="ts">
    interface Props {
        children: () => unknown;
    }
    const { children }: Props = $props();
</script>

<div>
    {@render children?.()}
</div>

方式二：使用Svelte内置的Renderable类型 #

如果需要更精确的类型，可以从svelte导入Renderable，它是Svelte内部定义的可渲染内容类型：

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

    interface Props {
        children: () => Renderable;
    }
    const { children }: Props = $props();
</script>

<div>
    {@render children?.()}
</div>

补充说明 #

由于Svelte 5的文档仍在完善中，官方暂未明确标注children的类型，但从实现逻辑来看，children是一个惰性执行的渲染函数，调用后返回组件的子内容，上述两种类型定义都能完美适配{@render children?.()}的调用方式。

内容的提问来源于stack exchange，提问作者Daniel Tonon