SvelteKitが自動生成する型の一覧

// ファイル名 → 生成される型
+page.ts        → PageLoad        // ユニバーサル（クライアント/サーバー両方）でのページデータ取得
+page.server.ts → PageServerLoad  // サーバーサイドのみでのページデータ取得（Cookie、DBアクセス可）
+layout.ts      → LayoutLoad      // ユニバーサルでのレイアウトデータ取得
+layout.server.ts → LayoutServerLoad // サーバーサイドのみでのレイアウトデータ取得

// すべてのSvelteファイルで利用可能
+page.svelte    → PageData, PageServerData      // ページコンポーネント用のデータ型
+layout.svelte  → LayoutData, LayoutServerData  // レイアウトコンポーネント用のデータ型  
+error.svelte   → PageData                      // エラーページ用のデータ型

// フォーム処理用
+page.server.ts → Actions  // default actionまたは名前付きactionの型定義

// RESTful APIエンドポイント用
+server.ts → RequestHandler  // HTTPメソッド（GET/POST/PUT/DELETE等）のハンドラー型

// 静的生成用 - プリレンダリングするパスの一覧を生成
+page.ts/+page.server.ts/+server.ts → EntryGenerator

// パラメータ検証用（src/paramsフォルダ内） - 動的ルートパラメータの形式を検証
src/params/*.ts → ParamMatcher

// プリレンダリング設定用 - ページ単位の設定をエクスポート
任意のファイル → Config

interface LoadEvent {
  // === ユニバーサル（クライアント/サーバー両方で利用可能） ===
  params: Record<string, string>;  // 動的ルートパラメータ（例：/blog/[slug]の slug）
  url: URL;                        // 現在のURL（クエリパラメータ含む）
  route: { id: string };           // ルートID（例："/blog/[slug]"）
  fetch: typeof fetch;             // SvelteKit拡張のfetch（Cookie自動送信、相対URL対応）
  setHeaders: Function;            // レスポンスヘッダー設定（キャッシュ制御など）
  depends: Function;               // 無効化の依存関係を宣言（invalidate時に再実行）
  parent: Function;                // 親レイアウトのデータを取得（データの継承）
  
  // === サーバーサイドのみ（+page.server.ts、+layout.server.ts） ===
  request?: Request;               // 元のHTTPリクエストオブジェクト
  locals?: App.Locals;             // リクエスト間で共有されるデータ（認証情報など）
  cookies?: Cookies;               // Cookie読み書き用のヘルパーオブジェクト
  platform?: App.Platform;         // デプロイ環境固有のAPI（Cloudflare Workers等）
}

// === +page.ts === 
// ユニバーサルLoad関数 - クライアント/サーバー両方で実行
import type { PageLoad } from './$types';
export const load: PageLoad = async (event) => {
  // event.params, event.url等が型付き
  const response = await event.fetch(`/api/data/${event.params.id}`);
  return {
    post: await response.json()
  };
};

// === +page.server.ts ===
// サーバーサイドLoad関数とActions
import type { PageServerLoad, Actions } from './$types';
export const load: PageServerLoad = async (event) => {
  // event.cookies, event.locals等も利用可能
  const session = event.cookies.get('session');
  const user = event.locals.user;  // hooks.server.tsで設定されたデータ
  
  return {
    user,
    sessionValid: !!session
  };
};

// フォーム処理用のActions
export const actions: Actions = {
  default: async (event) => {
    const formData = await event.request.formData();
    const email = formData.get('email');
    // フォーム処理ロジック
    return { success: true };
  },
  // 名前付きaction
  delete: async (event) => {
    // 削除処理
  }
};

// === +server.ts ===
// RESTful APIエンドポイント
import type { RequestHandler } from './$types';

// GETリクエストハンドラー
export const GET: RequestHandler = async (event) => {
  const data = await fetchDataFromDB(event.params.id);
  return new Response(JSON.stringify(data), {
    headers: { 'Content-Type': 'application/json' }
  });
};

// POSTリクエストハンドラー
export const POST: RequestHandler = async (event) => {
  const body = await event.request.json();
  const result = await saveToDatabase(body);
  return new Response(JSON.stringify(result), { status: 201 });
};

// === +layout.ts ===
// レイアウト用のユニバーサルLoad関数
import type { LayoutLoad } from './$types';
export const load: LayoutLoad = async (event) => {
  // すべての子ページで利用可能なデータを返す
  return {
    navigation: await fetchNavigationData()
  };
};

// === +layout.server.ts ===
// レイアウト用のサーバーサイドLoad関数
import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = async (event) => {
  // 認証チェックなど、サーバーサイドでの処理
  const session = event.cookies.get('session');
  if (!session) {
    throw redirect(303, '/login');
  }
  
  return {
    user: await getUserFromSession(session)
  };
};

// === +page.svelte ===
// Svelteコンポーネントでのデータ受け取り
<script lang="ts">
  import type { PageData } from './$types';
  
  // load関数の戻り値が自動的に型付けされる
  let { data }: { data: PageData } = $props();
  
  // dataの中身はload関数の返り値の型と一致
  $effect(() => {
    console.log(data.post);  // 型安全にアクセス可能
  });
</script>

// === src/params/integer.ts ===
// カスタムパラメータマッチャー
import type { ParamMatcher } from '@sveltejs/kit';

// /user/[id=integer]のような動的ルートで使用
export const match: ParamMatcher = (param) => {
  return /^\d+$/.test(param);  // 整数のみマッチ
};

// === 静的生成（プリレンダリング）===
// ビルド時に生成するページのパラメータを指定
import type { EntryGenerator } from './$types';

export const entries: EntryGenerator = () => {
  // /blog/[slug]のすべてのパスを生成
  return [
    { slug: 'first-post' },
    { slug: 'second-post' },
    { slug: 'third-post' }
  ];
};

// prerender設定
export const prerender = true;  // このページをプリレンダリング

.svelte-kit/types/
├── src/
│   └── routes/
│       ├── $types.d.ts              # ルート / の型定義
│       ├── about/
│       │   └── $types.d.ts         # /about の型定義
│       └── blog/
│           ├── $types.d.ts         # /blog の型定義
│           └── [slug]/
│               └── $types.d.ts     # /blog/[slug] の型定義
└── app.d.ts                        # グローバル型定義

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

// ルートパラメータの型定義（動的ルートの場合は具体的な型になる）
type RouteParams = Record<string, string>;  // 例：{ slug: string } for /blog/[slug]
type RouteId = '/';  // このルートの一意識別子

// Load関数の型エクスポート
export type PageServerLoad = Kit.ServerLoad<RouteParams, {}, RouteId>;
export type PageLoad = Kit.Load<RouteParams, {}, RouteId>;

// イベントオブジェクトの型エクスポート
export type PageServerLoadEvent = Kit.ServerLoadEvent<RouteParams, {}, RouteId>;
export type PageLoadEvent = Kit.LoadEvent<RouteParams, {}, RouteId>;

// 実際のload関数の返り値から推論された型
export type PageData = Kit.AwaitedProperties<
  Awaited<ReturnType<typeof import('../../../../../src/routes/+page.js').load>>
>;

// サーバーサイドload関数の返り値から推論された型  
export type PageServerData = Kit.AwaitedProperties<
  Awaited<ReturnType<typeof import('../../../../../src/routes/+page.server.js').load>>
>;

// Actions型（+page.server.tsにactionsがある場合のみ）
export type Actions = Kit.Actions<RouteParams, RouteId>;

interface LoadEvent<
  Params extends Partial<Record<string, string>> = Partial<Record<string, string>>,
  Data extends Record<string, any> | void = Record<string, any> | void,
  RouteId extends string | null = string | null
> {
  // === コア機能 ===
  fetch: typeof fetch;                    // SvelteKit拡張のfetch（Cookie自動付与、相対URL対応）
  params: Params;                         // 動的ルートパラメータ（/blog/[slug]のslug等）
  route: { id: RouteId };                 // ルート識別子（デバッグ用）
  url: URL;                               // 完全なリクエストURL（クエリパラメータ含む）
  
  // === データ管理 ===
  depends(...deps: string[]): void;       // invalidate()で再実行する依存関係を宣言
  parent(): Promise<Data>;                // 親レイアウトのload関数の結果を取得
  setHeaders(headers: ResponseHeaders): void; // Cache-Control等のレスポンスヘッダー設定
  
  // === サーバーサイド専用 (ServerLoadEvent) ===
  request?: Request;                      // 元のHTTPリクエスト（ヘッダー、body等）
  locals?: App.Locals;                    // hooks.server.tsで設定したリクエストスコープデータ
  cookies?: Cookies;                      // Cookie読み書きのヘルパーAPI
  platform?: App.Platform;                // Cloudflare Workers等のプラットフォーム固有API
  getClientAddress?(): string;            // クライアントのIPアドレス取得
  isDataRequest?: boolean;                // クライアントサイドナビゲーションかどうか
  isSubRequest?: boolean;                 // fetch()による内部リクエストかどうか
}

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>>;  // 名前付きアクションのマップ

interface Action<Params, OutputData, RouteId> {
  (event: RequestEvent<Params, RouteId>): 
    | OutputData                                      // 成功時のデータ
    | Promise<OutputData>                            // 非同期処理の成功データ
    | ActionFailure<Record<string, unknown>>;        // fail()による失敗結果
}

// 使用例
export const actions: Actions = {
  default: async ({ request }) => {                  // デフォルトアクション
    // フォーム処理
  },
  update: async ({ request, params }) => {           // 名前付きアクション
    // 更新処理
  },
  delete: async ({ params }) => {                    // 削除用アクション
    // 削除処理
  }
};

interface RequestHandler<
  Params extends Partial<Record<string, string>> = Partial<Record<string, string>>,
  RouteId extends string | null = string | null
> {
  (event: RequestEvent<Params, RouteId>): 
    | Response                    // 標準のWeb APIレスポンス
    | Promise<Response>           // 非同期でレスポンスを返す
    | void                        // レスポンスを返さない（404として扱われる）
    | Promise<void>;              // 非同期処理後、レスポンスなし
}

// 使用例
export const GET: RequestHandler = async ({ params, url }) => {
  const data = await fetchData(params.id);
  return new Response(JSON.stringify(data), {
    headers: { 'Content-Type': 'application/json' }
  });
};

export const POST: RequestHandler = async ({ request }) => {
  const body = await request.json();
  const result = await createResource(body);
  return new Response(JSON.stringify(result), { 
    status: 201,
    headers: { 'Content-Type': 'application/json' }
  });
};

// src/app.d.ts
declare global {
  namespace App {
    // 1. Localsの拡張（認証情報など）
    // hooks.server.tsでevent.localsに設定するデータの型定義
    interface Locals {
      user?: {
        id: string;
        email: string;
        permissions: string[];        // 権限リスト
      };
      db?: DatabaseConnection;        // DBコネクション
      startTime?: number;              // パフォーマンス計測用
    }
    
    // 2. PageDataの拡張（全ページ共通データ）
    // すべてのページで利用可能な共通データ型
    interface PageData {
      meta?: {
        title: string;                 // ページタイトル
        description: string;           // メタディスクリプション
        ogImage?: string;              // OGP画像URL
      };
      breadcrumbs?: Array<{            // パンくずリスト
        label: string;
        href: string;
      }>;
    }
    
    // 3. Errorの拡張（カスタムエラー）
    // error()関数で投げるエラーの型定義
    interface Error {
      code: 'FORBIDDEN' | 'NOT_FOUND' | 'SERVER_ERROR';  // エラーコード
      details?: Record<string, any>;   // 詳細情報
      timestamp?: number;               // 発生時刻
    }
    
    // 4. Platformの拡張（デプロイ環境固有）
    // Cloudflare Workers、Vercel等のプラットフォーム固有API
    interface Platform {
      env: {                            // 環境変数
        DB_CONNECTION_STRING: string;
        REDIS_URL: string;
        S3_BUCKET: string;
      };
      context: {                        // Cloudflare Workers Context
        waitUntil(promise: Promise<any>): void;  // バックグラウンド処理
      };
    }
  }
  
  // グローバル型の追加（プロジェクト全体で使用）
  type UserId = `user_${string}`;      // ユーザーIDの型安全な定義
  type PostId = `post_${string}`;      // 投稿IDの型安全な定義
  
  interface Window {
    // ブラウザグローバルの拡張
    __INITIAL_DATA__?: Record<string, any>;  // SSRで渡す初期データ
    gtag?: Function;                    // Google Analytics
  }
}

export {};  // モジュールとして扱うための必須エクスポート

// src/params/uuid.ts
// UUID形式のパラメータのみを許可するマッチャー
import type { ParamMatcher } from '@sveltejs/kit';

export const match: ParamMatcher = (param): param is string => {
  // UUID v4形式の正規表現でチェック
  return /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/.test(param);
};

// src/params/integer.ts
// 整数のみを許可するマッチャー
export const match: ParamMatcher = (param): param is string => {
  return /^\d+$/.test(param) && parseInt(param) <= Number.MAX_SAFE_INTEGER;
};

// src/params/slug.ts  
// URLスラッグ形式のみを許可するマッチャー
export const match: ParamMatcher = (param): param is string => {
  return /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(param);
};

// src/routes/user/[id=uuid]/+page.ts
// マッチャーを使用した動的ルート
import type { PageLoad } from './$types';

export const load: PageLoad = async ({ params }) => {
  // params.id は UUID形式であることが保証される
  const userId = params.id; // マッチャーによって検証済み
  
  const user = await fetchUser(userId);
  return { user };
};

// src/routes/blog/[year=integer]/[month=integer]/[slug=slug]/+page.ts
// 複数のマッチャーを組み合わせた例
export const load: PageLoad = async ({ params }) => {
  // すべてのパラメータが検証済み
  const year = parseInt(params.year);   // 整数であることが保証
  const month = parseInt(params.month); // 整数であることが保証  
  const slug = params.slug;             // スラッグ形式であることが保証
  
  const post = await fetchPost(year, month, slug);
  return { post };
};

# Ctrl+C で停止後
npm run dev

rm -rf .svelte-kit
npm run dev

{
  "extends": "./.svelte-kit/tsconfig.json",  // SvelteKitの型定義を継承（必須）
  "compilerOptions": {
    "strict": true,                          // 厳密な型チェックを有効化
    "moduleResolution": "bundler",          // バンドラー向けのモジュール解決
    "allowJs": true,                        // JavaScriptファイルも含める
    "checkJs": false,                       // JSファイルの型チェック（オプション）
    "esModuleInterop": true,                // CommonJS/ESM相互運用
    "skipLibCheck": true                    // ライブラリの型チェックをスキップ（高速化）
  }
}

rm -rf node_modules package-lock.json
npm install

# 生成された型を直接確認
ls -la .svelte-kit/types/src/routes/
cat .svelte-kit/types/src/routes/$types.d.ts