DEV Community

John Winston
John Winston

Posted on • Originally published at hugosum.com

End-to-end type safety with Svelte 5 and SvelteKit 2

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
    };
};
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Under the hood, PageProps and LayoutProps reuse PageData and LayoutData in their definition, nothing too special there.

export type PageProps = { data: PageData; form: ActionData };
Enter fullscreen mode Exit fullscreen mode

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay