SvelteKit 2表单ActionResults类型标注问题求助

问题原因 #

默认的Actions类型是泛化结构，无法自动推断单个action的具体返回类型，导致use:enhance中的result只能拿到ActionResult<Record<string, unknown> | undefined, ...>这种宽泛类型，必须通过any强转才能获取数据。

解决方案 #

步骤1：给Server Action明确类型标注 #

在+page.server.ts中，不要直接使用默认的Actions类型，而是给单个action指定具体的返回类型：

import type { ActionResult, fail } from '@sveltejs/kit';
import type { PageMetadata } from '$lib/types'; // 替换为你的PageMetadata实际路径

// 定义newPage action的返回类型：成功返回PageMetadata，失败返回自定义错误结构
type NewPageActionResult = ActionResult<PageMetadata, { message?: string }>;

export const actions = {
  newPage: async ({ locals }): Promise<NewPageActionResult> => {
    if (locals.user == null) return fail(403);

    const project = await getUserDefaultProject(locals.dbclient, locals.user.id);
    if (project == null) return fail(500);

    const newPage = await createNewPage(locals.dbclient, locals.user, project.id);
    if (newPage) return newPage;

    return fail(400, { message: '页面创建失败' });
  },
};

步骤2：在前端推导Action返回类型 #

在+page.svelte中，通过导入server action的类型，推导result的具体类型，无需再用any强转：

<script lang="ts">
  import { enhance } from '$app/forms';
  import type { actions } from './+page.server';
  import type { Awaited } from 'typescript';

  // 推导newPage action的最终返回类型
  type NewPageActionReturn = Awaited<ReturnType<typeof actions.newPage>>;
</script>

<form
  action="?/newPage"
  method="POST"
  use:enhance={({ cancel }) => {
    if (!loggedIn.state || offlineMode.state) {
      cancel();
      createNewLocalPage();
      return;
    }
    // 给result标注推导后的具体类型
    return async ({ result }: { result: NewPageActionReturn }) => {
      if (result.status === 200) {
        // 这里result.data会自动推断为PageMetadata
        const newPage = result.data;
        pages.state = [...pages.state, newPage];
      }
    };
  }}
>
  <button type="submit" title="create a new page" id="create-new-page">
    <Fa icon={faPlus} color="var(--background)" />
    <div>new page</div>
  </button>
</form>

更简洁方式：使用inferActionResult（SvelteKit 1.20+） #

如果你的SvelteKit版本在1.20及以上，可以用官方提供的inferActionResult工具类型直接推导：

<script lang="ts">
  import { enhance } from '$app/forms';
  import type { inferActionResult } from '@sveltejs/kit';
  import type { actions } from './+page.server';

  // 直接推导出newPage action的返回类型
  type NewPageResult = inferActionResult<typeof actions.newPage>;
</script>

<form
  action="?/newPage"
  method="POST"
  use:enhance={({ cancel }) => {
    // ... 省略前置判断逻辑
    return async ({ result }: { result: NewPageResult }) => {
      if (result.status === 200) {
        const newPage = result.data; // 自动推断为PageMetadata
        pages.state = [...pages.state, newPage];
      }
    };
  }}
>
  <!-- 按钮内容不变 -->
</form>

关键说明 #

• 通过给server action明确返回类型，让TypeScript捕捉到具体的success/error结构，避免泛化类型带来的限制。
• 前端复用server端的类型定义，保证前后端类型一致，同时减少重复代码。

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