Types

Generated types permalink

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:

ts
/** @type {import('@sveltejs/kit').RequestHandler<{
	foo: string;
	bar: string;
	baz: string
  }>} */
export async function GET({ params }) {
A function whose declared type is neither 'void' nor 'any' must return a value.2355A function whose declared type is neither 'void' nor 'any' must return a value.
	// ...
}

ts
export const GET: import('@sveltejs/kit').RequestHandler<{




    
Type '({ params }: RequestEvent<{ foo: string; bar: string; baz: string; }, string | null>) => Promise<void>' is not assignable to type 'RequestHandler<{ foo: string; bar: string; baz: string; }, string | null>'.
  Type 'Promise<void>' is not assignable to type 'MaybePromise<Response>'.
    Type 'Promise<void>' is not assignable to type 'Promise<Response>'.
      Type 'void' is not assignable to type 'Response'.2322Type '({ params }: RequestEvent<{ foo: string; bar: string; baz: string; }, string | null>) => Promise<void>' is not assignable to type 'RequestHandler<{ foo: string; bar: string; baz: string; }, string | null>'.
  Type 'Promise<void>' is not assignable to type 'MaybePromise<Response>'.
    Type 'Promise<void>' is not assignable to type 'Promise<Response>'.
      Type 'void' is not assignable to type 'Response'.
	foo: string;
	bar: string;
	baz: string;
}> = async ({ params }) => {
	// ...
};

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:

ts
import type * as Kit from '@sveltejs/kit';

type RouteParams = {
	foo: string;
	bar: string;
	baz: string;
}

export type PageServerLoad = Kit.ServerLoad<RouteParams>;
export type PageLoad = Kit.Load<RouteParams>;

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

ts
/** @type {import('./$types').PageServerLoad} */
export async function GET({ params }) {
	// ...
}

ts
import type { PageServerLoad } from './$types';

export const GET: PageServerLoad = async ({ params }) => {
	// ...
};

ts
/** @type {import('./$types').PageLoad} */
export async function load({ params, fetch }) {
	// ...
}

ts




    
import type { PageLoad } from './$types';

export const load: PageLoad = async ({ params, fetch }) => {
	// ...
};

For this to work, your own tsconfig.json or jsconfig.json should extend from the generated .svelte-kit/tsconfig.json (where .svelte-kit is your outDir ) and TypeScript should be installed as a dependency:

{ "extends": "./.svelte-kit/tsconfig.json" }

Default tsconfig.json permalink

The generated .svelte-kit/tsconfig.json file contains a mixture of options. Some are generated programmatically based on your project configuration, and should generally not be overridden without good reason:

.svelte-kit/tsconfig.json

ts
{
	"compilerOptions": {
		"baseUrl": "..",
		"paths": {
			"$lib": "src/lib",
			"$lib/*": "src/lib/*"
		},
		"rootDirs": ["..", "./types"]
	},
	"include": ["../src/**/*.js", "../src/**/*.ts", "../src/**/*.svelte"],
	"exclude": ["../node_modules/**", "./**"]
}

Others are required for SvelteKit to work properly, and should also be left untouched unless you know what you're doing:

.svelte-kit/tsconfig.json

ts
{
	"compilerOptions": {
		// this ensures that types are explicitly
		// imported with `import type`, which is
		// necessary as svelte-preprocess cannot
		// otherwise compile components correctly
		"importsNotUsedAsValues": "error",

		// Vite compiles one TypeScript module
		// at a time, rather than compiling
		// the entire module graph
		"isolatedModules": true,

		// TypeScript cannot 'see' when you
		// use an imported value in your
		// markup, so we need this
		"preserveValueImports": true,

		// This ensures both `vite build`
		// and `svelte-package` work correctly
		"lib": ["esnext", "DOM", "DOM.Iterable"],
		"moduleResolution": "node",
		"module": "esnext",
		"target": "esnext"
	}
}

App permalink

Error permalink

Defines the common shape of expected and unexpected errors. Expected errors are thrown using the error function. Unexpected errors are handled by the handleError hooks which should return this shape.

ts
interface Error {…}

ts
message: string;

Locals permalink

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

ts
interface Locals {}

PageData permalink

Defines the common shape of the $page.data store - 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 ).

ts
interface PageData {}

PageState permalink

The shape of the $page.state object, which can be manipulated using the pushState and replaceState functions from $app/navigation .

ts
interface PageState {}