Back in Svelte 4 and SvelteKit 1, you can use PageData
and LayoutData
to annotate the type of data passed from a load function in +page.svelte
and +layout.svelte
respectively to achieve end-to-end type safety. These two types are generated by SvelteKit based on the value returned by the load function.
For example, assuming we fetch data from an API in a load function as the following.
import type { PageServerLoad } from './$types';
export const load: PageServerLoad = async ({ params, route, parent }) => {
const { cat, dog } = await getAnimals() // cat has type Cat, dog has type Dog
return {
cat: cat,
dog: dog
};
};
You can then import PageData
to annotate the data
props in your component.
<script context="module" lang="ts">
import type { PageData } from './$types';
</script>
<script lang="ts">
export let data: PageData; // the type here will be { cat: Cat, dog: Dog }
</script>
Type safety with $props()
rune in Svelte 5
In Svelte 5, with the introduction of $props()
rune, every Svelte component only accepts a single object as its props. Since the type of $props()
returns any
by default, and does not accept type parameters, you have to add a type annotation to the variable to achieve type safety.
<script context="module" lang="ts">
import type { PageData } from './$types';
</script>
<script lang="ts">
let { data }: { data: PageData } = $props();
</script>
Simplify type annotation with PageProps
With the release of SvelteKit 2.16.0, new types PageProps
and LayoutProps
are introduced to simplify the type annotation for props in +page.svelte
and +layout.svelte
respectively.
<script context="module" lang="ts">
import type { PageProps } from './$types';
</script>
<script lang="ts">
let { data }: PageProps = $props();
</script>
Under the hood, PageProps
and LayoutProps
reuse PageData
and LayoutData
in their definition, nothing too special there.
export type PageProps = { data: PageData; form: ActionData };
Top comments (0)