Add TypeScript types for the preload function (#1468)

Author: dummdidumm

runtime/index.d.ts

@@ -1,6 +1,7 @@
 declare module "@sapper/app"
 declare module "@sapper/server"
 declare module "@sapper/service-worker"
+declare module "@sapper/common"
 
 declare module "@sapper/app" {
 	export interface Redirect {
@@ -35,3 +36,23 @@ declare module "@sapper/service-worker" {
 	export const shell: string[];
 	export const routes: Array<{ pattern: RegExp }>;
 }
+
+declare module "@sapper/common" {
+	export interface PreloadContext {
+		fetch: (url: string, options?: any) => Promise<any>;
+		error: (statusCode: number, message: Error | string) => void;
+		redirect: (statusCode: number, location: string) => void;
+	}
+
+	export interface Page {
+		host: string;
+		path: string;
+		params: Record<string, string>;
+		query: Record<string, string | string[]>;
+		error?: Error;
+	}
+
+	export interface Preload {
+		(this: PreloadContext, page: Page, session: any): object | Promise<object>;
+	}
+}

site/content/docs/04-preloading.md

@@ -122,3 +122,23 @@ You can abort rendering and redirect to a different location with `this.redirect
 	}
 </script>
 ```
+
+#### Typing the function
+
+If you use TypeScript and want to access the above context methods, TypeScript will thow an error and tell you that it does not know the type of `this`. To fix it, you need to specify the type of `this` (see the [official TypeScript documentation](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#specifying-the-type-of-this-for-functions)). We provide you with helper interfaces so you can type the function like this:
+
+```html
+<script context="module">
+	import type { Page, PreloadContext } from "@sapper/common";
+
+	export const preload: Preload = async function(this, page, session) {
+		const { user } = session;
+
+		if (!user) {
+			return this.redirect(302, 'login'); // TypeScript will know the type of `this` now
+		}
+
+		return { user };
+	}
+</script>
+```