SvelteKitReference

Types

Generated types

The RequestHandler and Load types both accept a Params argument allowing you to type the params object. For example this endpoint expects foo, bar and baz params:

src/routes/[foo]/[bar]/[baz]/+server

/**
 * @type {import('@sveltejs/kit').RequestHandler<{
 *   foo: string; *   bar: string; *   baz: string * }>} */export async function GETfunction GET(event: RequestEvent<{
    foo: string;
    bar: string;
    baz: string;
}, string | null>): MaybePromise<Response>{import('@sveltejs/kit').RequestHandler<{

foo: string;
bar: string;
baz: string
}>}

({ params(parameter) params: {
    foo: string;
    bar: string;
    baz: string;
}The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.
Inside query functions (including query.batch and query.live), accessing this property throws an error.
Pass values from the page as arguments to the query instead. Inside form and command functions it relates to the page
the remote function was called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use it
to determine whether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.
 }) {
	// ...}

import type { RequestHandler(alias) type RequestHandler<Params extends LayoutParams<"/"> = Record<string, string>, RouteId extends RouteId | null = string | null> = (event: RequestEvent<Params, RouteId>) => MaybePromise<Response>
import RequestHandlerA (event: RequestEvent) => Response function exported from a +server.js file that corresponds to an HTTP verb (GET, PUT, PATCH, etc) and handles requests with that method.
It receives Params as the first generic argument, which you can skip by using generated types instead.
reference } from '@sveltejs/kit';
export const GETconst GET: RequestHandler<{
    foo: string;
    bar: string;
    baz: string;
}>: RequestHandler(alias) type RequestHandler<Params extends LayoutParams<"/"> = Record<string, string>, RouteId extends RouteId | null = string | null> = (event: RequestEvent<Params, RouteId>) => MaybePromise<Response>
import RequestHandlerA (event: RequestEvent) => Response function exported from a +server.js file that corresponds to an HTTP verb (GET, PUT, PATCH, etc) and handles requests with that method.
It receives Params as the first generic argument, which you can skip by using generated types instead.
reference<{
  foo(property) foo: string: string;
  bar(property) bar: string: string;
  baz(property) baz: string: string
}> = async ({ params(parameter) params: {
    foo: string;
    bar: string;
    baz: string;
}The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.
Inside query functions (including query.batch and query.live), accessing this property throws an error.
Pass values from the page as arguments to the query instead. Inside form and command functions it relates to the page
the remote function was called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use it
to determine whether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.
 }) => {
	// ...};

Needless to say, this is cumbersome to write out, and less portable (if you were to rename the [foo] directory to [qux], the type would no longer reflect reality).

To solve this problem, SvelteKit generates .d.ts files for each of your endpoints and pages:

.svelte-kit/types/src/routes/[foo]/[bar]/[baz]/$types.d

import type * as Kit(alias) module "@sveltejs/kit"
import Kit from '@sveltejs/kit';

type RouteParamstype RouteParams = {
    foo: string;
    bar: string;
    baz: string;
} = {
	foo(property) foo: string: string;
	bar(property) bar: string: string;
	baz(property) baz: string: string;
};

export type RequestHandlertype RequestHandler = (event: Kit.RequestEvent<RouteParams, string | null>) => MaybePromise<Response> = Kit(alias) module "@sveltejs/kit"
import Kit.RequestHandlertype RequestHandler<Params extends LayoutParams<"/"> = Record<string, string>, RouteId extends RouteId | null = string | null> = (event: Kit.RequestEvent<Params, RouteId>) => MaybePromise<Response>A (event: RequestEvent) => Response function exported from a +server.js file that corresponds to an HTTP verb (GET, PUT, PATCH, etc) and handles requests with that method.
It receives Params as the first generic argument, which you can skip by using generated types instead.
<RouteParamstype RouteParams = {
    foo: string;
    bar: string;
    baz: string;
}>;
export type PageLoadtype PageLoad = (event: Kit.LoadEvent<RouteParams, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>> = Kit(alias) module "@sveltejs/kit"
import Kit.Loadtype Load<Params extends LayoutParams<"/"> = Record<string, string>, InputData extends Record<string, unknown> | null = Record<string, any> | null, ParentData extends Record<string, unknown> = Record<...>, OutputData extends Record<string, unknown> | void = void | Record<...>, RouteId extends RouteId | null = string | null> = (event: Kit.LoadEvent<Params, InputData, ParentData, RouteId>) => MaybePromise<OutputData>The generic form of PageLoad and LayoutLoad. You should import those from ./$types (see generated types)
rather than using Load directly.
<RouteParamstype RouteParams = {
    foo: string;
    bar: string;
    baz: string;
}>;

These files can be imported into your endpoints and pages as siblings, thanks to the rootDirs option in your TypeScript configuration:

src/routes/[foo]/[bar]/[baz]/+server

/** @type {import('./$types').RequestHandler} */
export async function GETfunction GET(event: RequestEvent<RouteParams, string | null>): MaybePromise<Response>{import('./$types').RequestHandler}
({ params(parameter) params: RouteParamsThe parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.
Inside query functions (including query.batch and query.live), accessing this property throws an error.
Pass values from the page as arguments to the query instead. Inside form and command functions it relates to the page
the remote function was called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use it
to determine whether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.
 }) {
	// ...}

import type { RequestHandler(alias) type RequestHandler = (event: RequestEvent<RouteParams, string | null>) => MaybePromise<Response>
import RequestHandler } from './$types';

export const GETconst GET: RequestHandler: RequestHandler(alias) type RequestHandler = (event: RequestEvent<RouteParams, string | null>) => MaybePromise<Response>
import RequestHandler = async ({ params(parameter) params: RouteParamsThe parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.
Inside query functions (including query.batch and query.live), accessing this property throws an error.
Pass values from the page as arguments to the query instead. Inside form and command functions it relates to the page
the remote function was called from, not the URL of the endpoint SvelteKit creates for the remote function. Never use it
to determine whether or not a user is authorized to access certain data, as these values are part of the request which could be manipulated.
 }) => {
	// ...};

src/routes/[foo]/[bar]/[baz]/+page

/** @type {import('./$types').PageLoad} */
export async function loadfunction load(event: LoadEvent<RouteParams, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>{import('./$types').PageLoad}
({ params(parameter) params: RouteParamsThe parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object
, fetch(parameter) fetch: {
    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
    (input: string | URL | Request, init?: RequestInit): Promise<Response>;
}fetch is equivalent to the native fetch web API, with a few additional features:

It can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.
It can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).
Internal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.
During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders
During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.

You can learn more about making credentialed requests with cookies here
 }) {
	// ...}

import type { PageLoad(alias) type PageLoad = (event: LoadEvent<RouteParams, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>
import PageLoad } from './$types';

export const loadconst load: PageLoad: PageLoad(alias) type PageLoad = (event: LoadEvent<RouteParams, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>
import PageLoad = async ({ params(parameter) params: RouteParamsThe parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object
, fetch(parameter) fetch: {
    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
    (input: string | URL | Request, init?: RequestInit): Promise<Response>;
}fetch is equivalent to the native fetch web API, with a few additional features:

It can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.
It can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).
Internal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.
During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders
During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.

You can learn more about making credentialed requests with cookies here
 }) => {
	// ...};

The return types of the load functions are then available through the $types module as PageData and LayoutData respectively, while the union of the return values of all Actions is available as ActionData.

Starting with version 2.16.0, two additional helper types are provided: PageProps defines data: PageData, as well as form: ActionData, when there are actions defined, while LayoutProps defines data: LayoutData, as well as children: Snippet.

src/routes/+page

<script>
	/** @type {import('./$types').PageProps} */
	let { data, form } = $props();
</script>

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

	let { data, form }: PageProps = $props();
</script>

Legacy mode

Before 2.16.0:

src/routes/+page

<script>
	/** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */
	let { data, form } = $props();
</script>

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

	let { data, form }: { data: PageData, form: ActionData } = $props();
</script>

Using Svelte 4:

src/routes/+page

<script>
  /** @type {import('./$types').PageData} */
  export let data;
  /** @type {import('./$types').ActionData} */
  export let form;
</script>

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

  
  export let data: PageData;
  
  export let form: ActionData;
</script>

For this to work, your own tsconfig.json or jsconfig.json should extend from the generated $app/types:

{ "extends": "$app/tsconfig" }

app.d.ts

The app.d.ts file is home to the ambient types of your apps, i.e. types that are available without explicitly importing them.

Always part of this file is the App namespace. This namespace contains several types that influence the shape of certain SvelteKit features you interact with.

It’s possible to tell SvelteKit how to type objects inside your app by declaring the App namespace. By default, a new project will have a file called src/app.d.ts containing the following:

declare globalnamespace global {
	namespace Appnamespace AppIt's possible to tell SvelteKit how to type objects inside your app by declaring the App namespace. By default, a new project will have a file called src/app.d.ts containing the following:
declare global {
	namespace App {
		// interface Error {}
		// interface Locals {}
		// interface PageData {}
		// interface PageState {}
		// interface Platform {}
	}
}

export {};
The export {} line exists because without it, the file would be treated as an ambient module which prevents you from adding import declarations.
If you need to add ambient declare module declarations, do so in a separate file like src/ambient.d.ts.
By populating these interfaces, you will gain type safety when using event.locals, event.platform, and data from load functions.
 {
		// interface Error {}		// interface Locals {}		// interface PageData {}		// interface PageState {}		// interface Platform {}	}
}

export {};

The export {} line exists because without it, the file would be treated as an ambient module which prevents you from adding import declarations. If you need to add ambient declare module declarations, do so in a separate file like src/ambient.d.ts.

By populating these interfaces, you will gain type safety when using event.locals, event.platform, and data from load functions.

Error

Defines the common shape of expected and unexpected errors. Expected errors are thrown using the error function. Every error passes through the handleError hooks, which must return this shape (with status and message optional, since they default to those of the caught error).

interface Error {/*…*/}

status: number;

message: string;

Locals

The interface that defines event.locals, which can be accessed in server hooks (handle, and handleError), server-only load functions, and +server.js files.

interface Locals {}

PageData

Defines the common shape of the page.data state - that is, the data that is shared between all pages. The Load and ServerLoad functions in ./$types will be narrowed accordingly. Use optional properties for data that is only present on specific pages. Do not add an index signature ([key: string]: any).

interface PageData {}

PageState

The shape of the page.state object, which can be manipulated using goto.

interface PageState {}

Platform

If your adapter provides platform-specific context via event.platform, you can specify it here.

interface Platform {}

Edit this page on GitHub llms.txt

previous next

Command Line Interface $service-worker