SvelteKit provides comprehensive TypeScript support with automatically generated types and exported interfaces from the @sveltejs/kit package.
Generated Types
SvelteKit automatically generates .d.ts files for each of your endpoints and pages to provide type-safe access to route parameters, load function data, and form actions.
If you need to manually regenerate types (for example, after changes to your route structure), run npx svelte-kit sync from your project directory.
Route Parameters
For a route like src/routes/[foo]/[bar]/[baz]/+page.js, SvelteKit generates:
// .svelte-kit/types/src/routes/[foo]/[bar]/[baz]/$types.d.ts
import type * as Kit from '@sveltejs/kit';
type RouteParams = {
foo: string;
bar: string;
baz: string;
};
export type PageLoad = Kit.Load<RouteParams>;
export type RequestHandler = Kit.RequestHandler<RouteParams>;
Using Generated Types
Import types from the generated $types module:
// src/routes/[foo]/[bar]/[baz]/+page.js
/** @type {import('./$types').PageLoad} */
export async function load({ params }) {
// params is typed as { foo: string; bar: string; baz: string }
return {
item: await fetchItem(params.foo)
};
}
// src/routes/[foo]/[bar]/[baz]/+server.js
/** @type {import('./$types').RequestHandler} */
export async function GET({ params }) {
// params.foo, params.bar, params.baz are all typed as string
return new Response('Hello');
}
Component Props
Starting with SvelteKit 2.16.0, helper types are provided for component props:
<!-- src/routes/+page.svelte -->
<script>
/** @type {import('./$types').PageProps} */
let { data, form } = $props();
</script>
PageProps defines data: PageData and form: ActionData (when actions are defined).
LayoutProps defines data: LayoutData and children: Snippet.
Exported Types
Adapter
Adapters are responsible for taking the production build and deploying it to a platform.interface Adapter {
name: string;
adapt: (builder: Builder) => MaybePromise<void>;
supports?: {
read?: (details: { config: any; route: { id: string } }) => boolean;
instrumentation?: () => boolean;
};
emulate?: () => MaybePromise<Emulator>;
}
Config
The configuration object for your SvelteKit project.interface Config extends SvelteConfig {
kit?: KitConfig;
[key: string]: any;
}
KitConfig
SvelteKit-specific configuration options.See Configuration for details. RequestEvent
The event object passed to hooks and server routes.interface RequestEvent<Params = Partial<Record<string, string>>> {
cookies: Cookies;
fetch: typeof fetch;
getClientAddress: () => string;
locals: App.Locals;
params: Params;
platform: App.Platform;
request: Request;
route: { id: string | null };
setHeaders: (headers: Record<string, string>) => void;
url: URL;
isDataRequest: boolean;
isSubRequest: boolean;
}
Load
The type for universal load functions.type Load<
Params extends Partial<Record<string, string>> = Partial<Record<string, string>>,
ParentData extends Record<string, any> = Record<string, any>,
OutputData extends Record<string, any> | void = Record<string, any> | void,
RouteId extends string | null = string | null
> = (event: LoadEvent<Params, ParentData, RouteId>) => MaybePromise<OutputData>;
/** @type {import('./$types').PageLoad} */
export async function load({ params, fetch }) {
const res = await fetch(`/api/items/${params.id}`);
return {
item: await res.json()
};
}
ServerLoad
The type for server-only load functions.type ServerLoad<
Params extends Partial<Record<string, string>> = Partial<Record<string, string>>,
ParentData extends Record<string, any> = Record<string, any>,
OutputData extends Record<string, any> | void = Record<string, any> | void,
RouteId extends string | null = string | null
> = (event: ServerLoadEvent<Params, ParentData, RouteId>) => MaybePromise<OutputData>;
locals, platform, and can return promises. RequestHandler
The type for API route handlers.type RequestHandler<
Params extends Partial<Record<string, string>> = Partial<Record<string, string>>,
RouteId extends string | null = string | null
> = (event: RequestEvent<Params, RouteId>) => MaybePromise<Response>;
/** @type {import('./$types').RequestHandler} */
export async function GET({ params }) {
return new Response(JSON.stringify({ id: params.id }));
}
Actions
The type for form actions.type Actions<
Params extends Partial<Record<string, string>> = Partial<Record<string, string>>,
OutputData extends Record<string, any> | void = Record<string, any> | void,
RouteId extends string | null = string | null
> = Record<string, Action<Params, OutputData, RouteId>>;
/** @type {import('./$types').Actions} */
export const actions = {
default: async ({ request }) => {
const data = await request.formData();
// process data
}
};
Handle
The type for the server-side handle hook.type Handle = (input: {
event: RequestEvent;
resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;
}) => MaybePromise<Response>;
/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
// Add custom header
const response = await resolve(event);
response.headers.set('X-Custom-Header', 'value');
return response;
}
HandleServerError
The type for the server-side handleError hook.type HandleServerError = (input: {
error: unknown;
event: RequestEvent;
status: number;
message: string;
}) => MaybePromise<void | App.Error>;
HandleClientError
The type for the client-side handleError hook.type HandleClientError = (input: {
error: unknown;
event: NavigationEvent;
status: number;
message: string;
}) => MaybePromise<void | App.Error>;
Cookies
The cookies API available in hooks and server routes.interface Cookies {
get(name: string, opts?: CookieParseOptions): string | undefined;
getAll(opts?: CookieParseOptions): Array<{ name: string; value: string }>;
set(name: string, value: string, opts: CookieSerializeOptions & { path: string }): void;
delete(name: string, opts: CookieSerializeOptions & { path: string }): void;
serialize(name: string, value: string, opts: CookieSerializeOptions & { path: string }): string;
}
App Namespace
The App namespace in src/app.d.ts contains ambient types that influence SvelteKit features:
// src/app.d.ts
declare global {
namespace App {
interface Error {
// Custom error properties
}
interface Locals {
// Custom locals properties
user?: { id: string; name: string };
}
interface PageData {
// Custom page data properties
}
interface PageState {
// Custom page state properties
}
interface Platform {
// Custom platform properties (e.g., env for Cloudflare)
}
}
}
export {};
App.Error
The shape of the error object returned by handleError hooks.interface Error {
message: string;
code?: string;
// Add custom properties
}
App.Locals
The shape of event.locals, which is available in hooks and server routes.interface Locals {
user?: { id: string; email: string };
session?: string;
}
App.PageData
Augments the data object available in +page.svelte and +layout.svelte.
Platform-specific context (e.g., Cloudflare bindings, Vercel edge config).interface Platform {
env: {
KV: KVNamespace;
DB: D1Database;
};
}
TypeScript Config
SvelteKit generates a .svelte-kit/tsconfig.json file that your project’s tsconfig.json should extend:
{
"extends": "./.svelte-kit/tsconfig.json"
}
- Path mappings for
$lib, $app/*, etc.
rootDirs for $types imports- Compiler options required by SvelteKit
See Also