SvelteKit中如何为页面表单store添加类型安全？

问题说明 #

我将代码拆分为+page.svelte和Role.svelte两个文件，Role.svelte负责表单逻辑，这样结构更整洁易维护，后续还会给+page.svelte添加更多组件。已知应在组件中直接使用$page.form而非通过props传递form，但$page.form不具备ActionData那样的类型安全和类型推断能力。我尝试在组件中声明let form: ActionData = $page.form但无效，希望在不改变现有文件结构的前提下，让$page.form拥有与ActionData一致的类型推断能力。

相关代码 #

Role.svelte

<script lang="ts">
  import { enhance } from "$app/forms";
  import { page } from "$app/stores";
  import type { ActionData } from "./$types";
  let form: ActionData = $page.form // 尝试后返回undefined
  form = form // 无任何效果
  let userRoles = ["admin", "student"];
</script>

<form method="post" action="?/role" use:enhance>
  <!-- 无效，只能用$page.form，但依然没有类型提示 -->
  {#if form?.noSelectedRole}
    <p>{form?.error}</p>
  {/if}

  <p>你是...</p>
  {#each userRoles as userRole}
    <input type="radio" value={userRole} name="role" />
    <label for={userRole}>{userRole}</label>
    <br />
  {/each}

  <slot />
  <!-- 处理学校未找到的情况 -->

  <p>你属于哪所学校？输入它的DepEd学校ID。</p>
  <input type="text" name="schoolId" placeholder="学校ID" />
  <br />
  <button type="submit">确认</button>
</form>

+page.svelte

<script lang="ts">
  import { page } from "$app/stores";
  import type { ActionData } from "./$types";
  import Role from "./Role.svelte";
  let form: ActionData = $page.form // 无效
</script>

<Role>
  <p>
    <!-- 输出undefined，只能用$page.form，但还是没有类型提示 :( -->
    {console.log(form?.noSelectedRole)}
    {#if form?.noSelectedRole}
      请选择一个角色。
    {/if}
  </p>
</Role>

+page.server.ts

import type { Actions } from "./$types";
import { fail, redirect } from '@sveltejs/kit';

export const actions = {
    role: async ({ request }) => {
        const formData = await request.formData()
        const userRole = formData.get("role") as string
        const schoolId = formData.get("schoolId") as string

        console.log(`角色: ${userRole}`)
        console.log(`学校ID: ${schoolId}`)

        if (typeof userRole !== "string" ||
            userRole == null) {
            console.log("未选择用户角色")
            return fail(400, {
                noSelectedRole: true,
                error: "请选择一个角色。",
                data: {...{userRole, schoolId}}
            })
        }
    }
} satisfies Actions;

解决方案 #

方法1：创建类型化派生Store

在组件中通过derived创建一个绑定$page.form的类型化Store，自动同步数据并提供类型提示：

// Role.svelte 脚本部分
import { page } from "$app/stores";
import type { ActionData } from "./$types";
import { derived } from "svelte/store";

const typedForm = derived(page, ($page) => $page.form as ActionData);

之后在模板中使用$typedForm即可获得完整类型推断：

{#if $typedForm?.noSelectedRole}
  <p>{$typedForm.error}</p>
{/if}

方法2：响应式变量+类型断言

在脚本块中声明响应式变量，自动跟随$page.form更新并赋予类型：

// Role.svelte 脚本部分
import { page } from "$app/stores";
import type { ActionData } from "./$types";

$: form = $page.form as ActionData;

模板中直接使用form变量就能获得类型提示，且会自动同步$page.form的变化。

方法3：全局类型增强

如果想在整个项目中让$page.form默认具备ActionData类型，可修改src/app.d.ts（无则创建）：

import type { ActionData } from "./routes/$types"; // 根路由路径，按需修改

declare global {
  namespace App {
    interface Page {
      form: ActionData | null;
    }
  }
}

export {};

修改后，任何地方使用$page.form都会自动推断为ActionData | null，无需手动断言。

注意事项 #

• 所有方法都要处理$page.form初始为null的情况，使用可选链?.避免报错。
• 全局类型增强需注意ActionData的导入路径是否正确，对应实际路由的$types文件。

内容的提问来源于stack exchange，提问作者unovillegas