Why does SvelteKit not generate the types for $page.data?

[dan-cooke]

I'm just wondering why all the routes have their own PageData defined which is accurate, but the root App.PageData cannot be generated by combining these types?

Its most likely intentional, but I'd love to know more about the reasons for the design choice

[david-plugge]

Id would be rather hard to get the types 100% correct.

type PageOne = {
	a: number;
	b: number;
	c: string;
}

type PageTwo = {
	b: number;
	c: number;
	d: string
}

The naive approach would be to | all types together like so:

type PageData = PageOne | PageTwo

Copy the code into your editor and see that this is not working as expected:

Only properties b and c are shown as they appear on both types.

To get around this we would need to add the missing properties to ALL types:

type PageOne = {
	a: number;
	b: number;
	c: string;

	d?: undefined;
}

type PageTwo = {
	b: number;
	c: number;
	d: string;

	a?: undefined;
}

This works!

But this is a very simple example. You can imagine how complex this can become with more pages and nested data.
You can achieve this behaviour with some advanced typescript stuff, but it´s probably not worth it and i dont think the typescript server would like the extra work at all.

export let data: PageData is typed, just use that whenever you can and if not, just add types by yourself.

I often end up splitting my +page.svelte file into components and use the PageData:

/posts/+page.server.ts

export const load = () => {
	return {
		posts: db.getPostsSomehow()
	}
}

/posts/Post.svelte

<script lang="ts">
	import type { PageData } from './$types';

	export let post: PageData['posts'][number];
</script>
...

/posts/+page.svelte

<script lang="ts">
	import Post from './Post.svelte';

	export let data;
	import type { PageData } from './$types';
</script>

{#each data.posts as post}
	<Post {post} />
{/each}

The same goes for data coming from layout loads. Just import the correct LayoutData and you are all set.