Skip to main content

Types

Edit this page on GitHub

$app/forms

ts
import { enhance, applyAction } from '$app/forms';

SubmitFunction

ts
type SubmitFunction<
  Success extends Record<string, unknown> | undefined = Record<string, any>,
  Invalid extends Record<string, unknown> | undefined = Record<string, any>
> = (input: {
  action: URL;
  data: FormData;
  form: HTMLFormElement;
  controller: AbortController;
  cancel: () => void;
}) =>
  | void
  | ((opts: {
      form: HTMLFormElement;
      action: URL;
      result: ActionResult<Success, Invalid>;
      update: () => Promise<void>;
    }) => void);
 

@sveltejs/kit

The following can be imported from @sveltejs/kit:

Action

ts
interface Action<
  Params extends Partial<Record<string, string>> = Partial<
    Record<string, string>
  >,
  OutputData extends Record<string, any> | void = Record<string, any> | void
> {
  (event: RequestEvent<Params>): MaybePromise<OutputData>;
}
 

ActionResult

When calling a form action via fetch, the response will be one of these shapes.

ts
type ActionResult<
  Success extends Record<string, unknown> | undefined = Record<string, any>,
  Invalid extends Record<string, unknown> | undefined = Record<string, any>
> =
  | { type: 'success'; status: number; data?: Success }
  | { type: 'invalid'; status: number; data?: Invalid }
  | { type: 'redirect'; status: number; location: string }
  | { type: 'error'; error: any };
 

Actions

ts
type Actions<
  Params extends Partial<Record<string, string>> = Partial<
    Record<string, string>
  >,
  OutputData extends Record<string, any> | void = Record<string, any> | void
> = Record<string, Action<Params, OutputData>>;
 

Adapter

ts
interface Adapter {
  name: string;
  adapt(builder: Builder): MaybePromise<void>;
}
 

AwaitedActions

ts
type AwaitedActions<T extends Record<string, (...args: any) => any>> = {
  [Key in keyof T]: OptionalUnion<
    UnpackValidationError<Awaited<ReturnType<T[Key]>>>
  >;
}[keyof T];
 

AwaitedProperties

ts
type AwaitedProperties<input extends Record<string, any> | void> =
  AwaitedPropertiesUnion<input> extends Record<string, any>
    ? OptionalUnion<AwaitedPropertiesUnion<input>>
    : AwaitedPropertiesUnion<input>;
 

Builder

ts
interface Builder {
  log: Logger;
  rimraf(dir: string): void;
  mkdirp(dir: string): void;
 
  config: ValidatedConfig;
  prerendered: Prerendered;
 
  createEntries(fn: (route: RouteDefinition) => AdapterEntry): Promise<void>;
 
  generateManifest: (opts: {
    relativePath: string;
    format?: 'esm' | 'cjs';
  }) => string;
 
  getBuildDirectory(name: string): string;
  getClientDirectory(): string;
  getServerDirectory(): string;
  getStaticDirectory(): string;
 
  getAppPath(): string;
 
  writeClient(dest: string): string[];
 
  writePrerendered(
    dest: string,
    opts?: {
      fallback?: string;
    }
  ): string[];
 
  writeServer(dest: string): string[];
 
  copy(
    from: string,
    to: string,
    opts?: {
      filter?: (basename: string) => boolean;
      replace?: Record<string, string>;
    }
  ): string[];
 
  compress(directory: string): Promise<void>;
}
 
ts
log: Logger;
ts
rimraf(dir: string): void;
ts
mkdirp(dir: string): void;
ts
config: ValidatedConfig;
ts
prerendered: Prerendered;
ts
createEntries(fn: (route: RouteDefinition) => AdapterEntry): Promise<void>;
  • fn A function that groups a set of routes into an entry point

Create entry points that map to individual functions

ts
generateManifest: (opts: { relativePath: string; format?: 'esm' | 'cjs' }) => string;
ts
getBuildDirectory(name: string): string;
ts
getClientDirectory(): string;
ts
getServerDirectory(): string;
ts
getStaticDirectory(): string;
ts
getAppPath(): string;

The application path including any configured base path

ts
writeClient(dest: string): string[];
  • dest the destination folder to which files should be copied
  • Returns an array of paths corresponding to the files that have been created by the copy
ts
writePrerendered(
    dest: string,
    opts?: {
      fallback?: string;
    }
  ): string[];
  • dest null
ts
writeServer(dest: string): string[];
  • dest the destination folder to which files should be copied
  • Returns an array of paths corresponding to the files that have been created by the copy
ts
copy(
    from: string,
    to: string,
    opts?: {
      filter?: (basename: string) => boolean;
      replace?: Record<string, string>;
    }
  ): string[];
  • from the source file or folder
  • to the destination file or folder
  • opts.filter a function to determine whether a file or folder should be copied
  • opts.replace a map of strings to replace
  • Returns an array of paths corresponding to the files that have been created by the copy
ts
compress(directory: string): Promise<void>;
  • directory Path to the directory containing the files to be compressed

Config

ts
interface Config {
  compilerOptions?: CompileOptions;
  extensions?: string[];
  kit?: KitConfig;
  package?: {
    source?: string;
    dir?: string;
    emitTypes?: boolean;
    exports?: (filepath: string) => boolean;
    files?: (filepath: string) => boolean;
  };
  preprocess?: any;
  [key: string]: any;
}
 

Cookies

ts
interface Cookies {
  get(
    name: string,
    opts?: import('cookie').CookieParseOptions
  ): string | undefined;
 
  set(
    name: string,
    value: string,
    opts?: import('cookie').CookieSerializeOptions
  ): void;
 
  delete(name: string, opts?: import('cookie').CookieSerializeOptions): void;
 
  serialize(
    name: string,
    value: string,
    opts?: import('cookie').CookieSerializeOptions
  ): string;
}
 
ts
get(name: string, opts?: import('cookie').CookieParseOptions): string | undefined;

Gets a cookie that was previously set with cookies.set, or from the request headers.

ts
set(name: string, value: string, opts?: import('cookie').CookieSerializeOptions): void;

Sets a cookie. This will add a set-cookie header to the response, but also make the cookie available via cookies.get during the current request.

The httpOnly and secure options are true by default (except on http://localhost, where secure is false), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The sameSite option defaults to lax.

By default, the path of a cookie is the 'directory' of the current pathname. In most cases you should explicitly set path: '/' to make the cookie available throughout your app.

ts
delete(name: string, opts?: import('cookie').CookieSerializeOptions): void;

Deletes a cookie by setting its value to an empty string and setting the expiry date in the past.

ts
serialize(name: string, value: string, opts?: import('cookie').CookieSerializeOptions): string;
  • name the name for the cookie
  • value value to set the cookie to
  • options object containing serialization options

Serialize a cookie name-value pair into a Set-Cookie header string.

The httpOnly and secure options are true by default (except on http://localhost, where secure is false), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The sameSite option defaults to lax.

By default, the path of a cookie is the current pathname. In most cases you should explicitly set path: '/' to make the cookie available throughout your app.

Handle

ts
interface Handle {
  (input: {
    event: RequestEvent;
    resolve(event: RequestEvent, opts?: ResolveOptions): MaybePromise<Response>;
  }): MaybePromise<Response>;
}
 

HandleClientError

ts
interface HandleClientError {
  (input: { error: unknown; event: NavigationEvent }): void | App.Error;
}
 

HandleFetch

ts
interface HandleFetch {
  (input: {
    event: RequestEvent;
    request: Request;
    fetch: typeof fetch;
  }): MaybePromise<Response>;
}
 

HandleServerError

ts
interface HandleServerError {
  (input: { error: unknown; event: RequestEvent }): void | App.Error;
}
 

KitConfig

ts
interface KitConfig {
  adapter?: Adapter;
  alias?: Record<string, string>;
  appDir?: string;
  csp?: {
    mode?: 'hash' | 'nonce' | 'auto';
    directives?: CspDirectives;
    reportOnly?: CspDirectives;
  };
  csrf?: {
    checkOrigin?: boolean;
  };
  env?: {
    dir?: string;
    publicPrefix?: string;
  };
  moduleExtensions?: string[];
  files?: {
    assets?: string;
    hooks?: {
      client?: string;
      server?: string;
    };
    lib?: string;
    params?: string;
    routes?: string;
    serviceWorker?: string;
    appTemplate?: string;
    errorTemplate?: string;
  };
  inlineStyleThreshold?: number;
  outDir?: string;
  paths?: {
    assets?: string;
    base?: string;
  };
  prerender?: {
    concurrency?: number;
    crawl?: boolean;
    default?: boolean;
    enabled?: boolean;
    entries?: Array<'*' | `/${string}`>;
    onError?: PrerenderOnErrorValue;
    origin?: string;
  };
  serviceWorker?: {
    register?: boolean;
    files?: (filepath: string) => boolean;
  };
  trailingSlash?: TrailingSlash;
  version?: {
    name?: string;
    pollInterval?: number;
  };
}
 

Load

The generic form of PageLoad and LayoutLoad. You should import those from ./$types (see generated types) rather than using Load directly.

ts
interface Load<
  Params extends Partial<Record<string, string>> = Partial<
    Record<string, string>
  >,
  InputData extends Record<string, unknown> | null = Record<string, any> | null,
  ParentData extends Record<string, unknown> = Record<string, any>,
  OutputData extends Record<string, unknown> | void = Record<string, any> | void
> {
  (event: LoadEvent<Params, InputData, ParentData>): MaybePromise<OutputData>;
}
 

LoadEvent

ts
interface LoadEvent<
  Params extends Partial<Record<string, string>> = Partial<
    Record<string, string>
  >,
  Data extends Record<string, unknown> | null = Record<string, any> | null,
  ParentData extends Record<string, unknown> = Record<string, any>
> extends NavigationEvent<Params> {
  fetch: typeof fetch;
  data: Data;
  setHeaders: (headers: Record<string, string>) => void;
  parent: () => Promise<ParentData>;
  depends: (...deps: string[]) => void;
}
 

Navigation

ts
interface Navigation {
  from: NavigationTarget | null;
  to: NavigationTarget | null;
  type: NavigationType;
  delta?: number;
}
 

NavigationEvent

ts
interface NavigationEvent<
  Params extends Partial<Record<string, string>> = Partial<
    Record<string, string>
  >
> {
  params: Params;
  routeId: string | null;
  url: URL;
}
 

NavigationTarget

ts
interface NavigationTarget {
  params: Record<string, string> | null;
  routeId: string | null;
  url: URL;
}
 

NavigationType

ts
type NavigationType = 'load' | 'unload' | 'link' | 'goto' | 'popstate';
 

Page

The shape of the $page store

ts
interface Page<Params extends Record<string, string> = Record<string, string>> {
  url: URL;
 
  params: Params;
 
  routeId: string | null;
 
  status: number;
 
  error: App.Error | null;
 
  data: App.PageData & Record<string, any>;
 
  form: any;
}
 
ts
url: URL;

The URL of the current page

ts
params: Params;

The parameters of the current page - e.g. for a route like /blog/[slug], the slug parameter

ts
routeId: string | null;

The route ID of the current page - e.g. for src/routes/blog/[slug], it would be blog/[slug]

ts
status: number;

Http status code of the current page

ts
error: App.Error | null;

The error object of the current page, if any. Filled from the handleError hooks.

ts
data: App.PageData & Record<string, any>;

The merged result of all data from all load functions on the current page. You can type a common denominator through App.PageData.

ts
form: any;

Filled only after a form submission. See form actions for more info.

ParamMatcher

ts
interface ParamMatcher {
  (param: string): boolean;
}
 

RequestEvent

ts
interface RequestEvent<
  Params extends Partial<Record<string, string>> = Partial<
    Record<string, string>
  >
> {
  cookies: Cookies;
  fetch: typeof fetch;
  getClientAddress: () => string;
  locals: App.Locals;
  params: Params;
  platform: Readonly<App.Platform>;
  request: Request;
  routeId: string | null;
  setHeaders: (headers: Record<string, string>) => void;
  url: URL;
}
 

RequestHandler

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.

ts
interface RequestHandler<
  Params extends Partial<Record<string, string>> = Partial<
    Record<string, string>
  >
> {
  (event: RequestEvent<Params>): MaybePromise<Response>;
}
 

ResolveOptions

ts
interface ResolveOptions {
  transformPageChunk?: (input: {
    html: string;
    done: boolean;
  }) => MaybePromise<string | undefined>;
  filterSerializedResponseHeaders?: (name: string, value: string) => boolean;
}
 

SSRManifest

ts
interface SSRManifest {
  appDir: string;
  appPath: string;
  assets: Set<string>;
  mimeTypes: Record<string, string>;
 
  _: {
    entry: {
      file: string;
      imports: string[];
      stylesheets: string[];
    };
    nodes: SSRNodeLoader[];
    routes: SSRRoute[];
    matchers: () => Promise<Record<string, ParamMatcher>>;
  };
}
 
ts
appDir: string;
ts
appPath: string;
ts
assets: Set<string>;
ts
mimeTypes: Record<string, string>;
ts
_: {
    entry: {
      file: string;
      imports: string[];
      stylesheets: string[];
    };
    nodes: SSRNodeLoader[];
    routes: SSRRoute[];
    matchers: () => Promise<Record<string, ParamMatcher>>;
  };

private fields

Server

ts
class Server {
  constructor(manifest: SSRManifest);
  init(options: ServerInitOptions): Promise<void>;
  respond(request: Request, options: RequestOptions): Promise<Response>;
}
 

ServerInitOptions

ts
interface ServerInitOptions {
  env: Record<string, string>;
}
 

ServerLoad

The generic form of PageServerLoad and LayoutServerLoad. You should import those from ./$types (see generated types) rather than using ServerLoad directly.

ts
interface 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
> {
  (event: ServerLoadEvent<Params, ParentData>): MaybePromise<OutputData>;
}
 

ServerLoadEvent

ts
interface ServerLoadEvent<
  Params extends Partial<Record<string, string>> = Partial<
    Record<string, string>
  >,
  ParentData extends Record<string, any> = Record<string, any>
> extends RequestEvent<Params> {
  parent: () => Promise<ParentData>;
  depends: (...deps: string[]) => void;
}
 

ValidationError

ts
interface ValidationError<
  T extends Record<string, unknown> | undefined = undefined
> extends UniqueInterface {
  status: number;
  data: T;
}
 

Additional types

The following are referenced by the public types documented above, but cannot be imported directly:

AdapterEntry

ts
interface AdapterEntry {
  id: string;
 
  filter: (route: RouteDefinition) => boolean;
 
  complete: (entry: {
    generateManifest: (opts: {
      relativePath: string;
      format?: 'esm' | 'cjs';
    }) => string;
  }) => MaybePromise<void>;
}
 
ts
id: string;

A string that uniquely identifies an HTTP service (e.g. serverless function) and is used for deduplication. For example, /foo/a-[b] and /foo/[c] are different routes, but would both be represented in a Netlify _redirects file as /foo/:param, so they share an ID

ts
filter: (route: RouteDefinition) => boolean;

A function that compares the candidate route with the current route to determine if it should be treated as a fallback for the current route. For example, /foo/[c] is a fallback for /foo/a-[b], and /[...catchall] is a fallback for all routes

ts
complete: (entry: {
    generateManifest: (opts: { relativePath: string; format?: 'esm' | 'cjs' }) => string;
  }) => MaybePromise<void>;

A function that is invoked once the entry has been created. This is where you should write the function to the filesystem and generate redirect manifests.

Csp

ts
namespace Csp {
  type ActionSource = 'strict-dynamic' | 'report-sample';
  type BaseSource =
    | 'self'
    | 'unsafe-eval'
    | 'unsafe-hashes'
    | 'unsafe-inline'
    | 'wasm-unsafe-eval'
    | 'none';
  type CryptoSource = `${'nonce' | 'sha256' | 'sha384' | 'sha512'}-${string}`;
  type FrameSource = HostSource | SchemeSource | 'self' | 'none';
  type HostNameScheme = `${string}.${string}` | 'localhost';
  type HostSource = `${HostProtocolSchemes}${HostNameScheme}${PortScheme}`;
  type HostProtocolSchemes = `${string}://` | '';
  type HttpDelineator = '/' | '?' | '#' | '\\';
  type PortScheme = `:${number}` | '' | ':*';
  type SchemeSource =
    | 'http:'
    | 'https:'
    | 'data:'
    | 'mediastream:'
    | 'blob:'
    | 'filesystem:';
  type Source = HostSource | SchemeSource | CryptoSource | BaseSource;
  type Sources = Source[];
  type UriPath = `${HttpDelineator}${string}`;
}
 

CspDirectives

ts
interface CspDirectives {
  'child-src'?: Csp.Sources;
  'default-src'?: Array<Csp.Source | Csp.ActionSource>;
  'frame-src'?: Csp.Sources;
  'worker-src'?: Csp.Sources;
  'connect-src'?: Csp.Sources;
  'font-src'?: Csp.Sources;
  'img-src'?: Csp.Sources;
  'manifest-src'?: Csp.Sources;
  'media-src'?: Csp.Sources;
  'object-src'?: Csp.Sources;
  'prefetch-src'?: Csp.Sources;
  'script-src'?: Array<Csp.Source | Csp.ActionSource>;
  'script-src-elem'?: Csp.Sources;
  'script-src-attr'?: Csp.Sources;
  'style-src'?: Array<Csp.Source | Csp.ActionSource>;
  'style-src-elem'?: Csp.Sources;
  'style-src-attr'?: Csp.Sources;
  'base-uri'?: Array<Csp.Source | Csp.ActionSource>;
  sandbox?: Array<
    | 'allow-downloads-without-user-activation'
    | 'allow-forms'
    | 'allow-modals'
    | 'allow-orientation-lock'
    | 'allow-pointer-lock'
    | 'allow-popups'
    | 'allow-popups-to-escape-sandbox'
    | 'allow-presentation'
    | 'allow-same-origin'
    | 'allow-scripts'
    | 'allow-storage-access-by-user-activation'
    | 'allow-top-navigation'
    | 'allow-top-navigation-by-user-activation'
  >;
  'form-action'?: Array<Csp.Source | Csp.ActionSource>;
  'frame-ancestors'?: Array<
    Csp.HostSource | Csp.SchemeSource | Csp.FrameSource
  >;
  'navigate-to'?: Array<Csp.Source | Csp.ActionSource>;
  'report-uri'?: Csp.UriPath[];
  'report-to'?: string[];
 
  'require-trusted-types-for'?: Array<'script'>;
  'trusted-types'?: Array<'none' | 'allow-duplicates' | '*' | string>;
  'upgrade-insecure-requests'?: boolean;
 
  /** @deprecated */
  'require-sri-for'?: Array<'script' | 'style' | 'script style'>;
 
  /** @deprecated */
  'block-all-mixed-content'?: boolean;
 
  /** @deprecated */
  'plugin-types'?: Array<`${string}/${string}` | 'none'>;
 
  /** @deprecated */
  referrer?: Array<
    | 'no-referrer'
    | 'no-referrer-when-downgrade'
    | 'origin'
    | 'origin-when-cross-origin'
    | 'same-origin'
    | 'strict-origin'
    | 'strict-origin-when-cross-origin'
    | 'unsafe-url'
    | 'none'
  >;
}
 

HttpMethod

ts
type HttpMethod = 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
 

Logger

ts
interface Logger {
  (msg: string): void;
  success(msg: string): void;
  error(msg: string): void;
  warn(msg: string): void;
  minor(msg: string): void;
  info(msg: string): void;
}
 

MaybePromise

ts
type MaybePromise<T> = T | Promise<T>;
 

PrerenderErrorHandler

ts
interface PrerenderErrorHandler {
  (details: {
    status: number;
    path: string;
    referrer: string | null;
    referenceType: 'linked' | 'fetched';
  }): void;
}
 

PrerenderMap

ts
type PrerenderMap = Map<string, PrerenderOption>;
 

PrerenderOnErrorValue

ts
type PrerenderOnErrorValue = 'fail' | 'continue' | PrerenderErrorHandler;
 

PrerenderOption

ts
type PrerenderOption = boolean | 'auto';
 

Prerendered

ts
interface Prerendered {
  pages: Map<
    string,
    {
      file: string;
    }
  >;
  assets: Map<
    string,
    {
      type: string;
    }
  >;
  redirects: Map<
    string,
    {
      status: number;
      location: string;
    }
  >;
 
  paths: string[];
}
 
ts
pages: Map<
    string,
    {
      /** The location of the .html file relative to the output directory */
      file: string;
    }
  >;
ts
assets: Map<
    string,
    {
      /** The MIME type of the asset */
      type: string;
    }
  >;
ts
redirects: Map<
    string,
    {
      status: number;
      location: string;
    }
  >;
ts
paths: string[];

An array of prerendered paths (without trailing slashes, regardless of the trailingSlash config)

RequestOptions

ts
interface RequestOptions {
  getClientAddress: () => string;
  platform?: App.Platform;
}
 

RouteDefinition

ts
interface RouteDefinition {
  id: string;
  pattern: RegExp;
  segments: RouteSegment[];
  methods: HttpMethod[];
}
 

RouteSegment

ts
interface RouteSegment {
  content: string;
  dynamic: boolean;
  rest: boolean;
}
 

TrailingSlash

ts
type TrailingSlash = 'never' | 'always' | 'ignore';
 

UniqueInterface

ts
interface UniqueInterface {
  readonly [uniqueSymbol]: unknown;
}
 

App

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:

ts
/// <reference types="@sveltejs/kit" />
 
declare namespace App {
  interface Locals {}
 
  interface PageData {}
 
  interface Platform {}
}

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

Note that since it's an ambient declaration file, you have to be careful when using import statements. Once you add an import at the top level, the declaration file is no longer considered ambient and you lose access to these typings in other files. To avoid this, either use the import(...) function:

ts
interface Locals {
  user: import('$lib/types').User;
}

Or wrap the namespace with declare global:

ts
import { User } from '$lib/types';
 
declare global {
  namespace App {
    interface Locals {
      user: User;
    }
    // ...
  }
}

Error

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 {
  message: string;
}
 

Locals

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

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 {}
 

Platform

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

ts
interface Platform {}
 

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]/+page.server.js
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.
  // ...
}
src/routes/[foo]/[bar]/[baz]/+page.server.ts
ts
import type { RequestHandler } from '@sveltejs/kit';
 
export const GET: RequestHandler = async ({ params }) => {
Type '({ params }: RequestEvent<Partial<Record<string, string>>>) => Promise<void>' is not assignable to type 'RequestHandler<Partial<Record<string, string>>>'.
  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<Partial<Record<string, string>>>) => Promise<void>' is not assignable to type 'RequestHandler<Partial<Record<string, string>>>'.
  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'.
  // ...
}

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.ts
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:

src/routes/[foo]/[bar]/[baz]/+page.server.js
ts
/** @type {import('./$types').PageServerLoad} */
export async function GET({ params }) {
  // ...
}
src/routes/[foo]/[bar]/[baz]/+page.server.ts
ts
import type { PageServerLoad } from './$types';
 
export const GET: PageServerLoad = async ({ params }) => {
  // ...
}
src/routes/[foo]/[bar]/[baz]/+page.js
ts
/** @type {import('./$types').PageLoad} */
export async function load({ params, fetch }) {
  // ...
}
src/routes/[foo]/[bar]/[baz]/+page.ts
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):

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

Default tsconfig.json

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
{
  "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
{
  "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"
  }
}
previous Configuration
next SEO
We stand with Ukraine. Donate → We stand with Ukraine. Petition your leaders. Show your support.