SvelteKit provides automatic type generation for load functions, ensuring data flows are type-safe across the server-client boundary.

Generated $types

When you create +page.svelte and +page.ts in the same route, SvelteKit generates a $types.d.ts file with typed interfaces:

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

export const load: PageLoad = async ({ params, fetch }) => {
  return { post: await fetchPost(params.slug) }
}

Key types:

  • PageLoad / LayoutLoad — for universal load functions
  • PageServerLoad / LayoutServerLoad — for server-only load functions
  • PageData / LayoutData — returned data shape
  • Actions / RequestHandler — for form actions and API routes

app.d.ts Declarations

The src/app.d.ts file is the central type declaration for SvelteKit’s application interface:

declare global {
  namespace App {
    interface Locals {
      user: User | null
    }
    interface PageData {
      title: string
    }
    interface PageState {
      modal: boolean
    }
    interface Platform {
      env: Env
      context: ExecutionContext
    }
    interface Error {
      code: number
      message: string
    }
  }
}

export {}
  • App.Locals — Type for event.locals in hooks and load functions
  • App.PageData — Type for $page.data across all routes
  • App.PageState — Type for custom page state (shallow routing)
  • App.Platform — Type for platform-specific data (Cloudflare, etc.)
  • App.Error — Type for error objects passed to +error.svelte

$app Types Module

The $app/types module provides utility types for working with SvelteKit’s stores and navigation:

import type { Page } from '$app/types'

Best Practices

  • Always type App.Locals in app.d.ts for auth data
  • Use generated $types for load function signatures
  • Type form action return values for safe form handling
  • Use the satisfies keyword with PageLoad for inline validation
  • Keep app.d.ts minimal — only app-wide interfaces

See Also