在 SvelteKit 2 中为表单操作成功输入 ActionResults 时遇到困难

Question

我正在尝试将创建的对象从 POST 请求返回到页面。一切正常，但 Svelte Vite 开发服务器（正在运行）似乎无法正确理解类型，导致我必须通过

any

才能获取我需要的数据。

当我将其悬停时，该操作具有正确的推断返回类型，但是增强器回调中的

result

停留在类型：

ActionResult<Record<string, unknown> | undefined, Record<string, unknown> | undefined>

。

以下是

+page.server.ts

中的相关操作：

export const actions: Actions = {
    newPage: async ({ locals }) => {
        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);
    },
};

（

newPage

的类型为

<PageMetadata|null>

）

以及

+page.svelte

中的增强表单代码：

<form
    action="?/newPage"
    method="POST"
    use:enhance={({ cancel }) => {
        if (!loggedIn.state || offlineMode.state) {
            cancel();
            createNewLocalPage();
            return;
        }
        return async ({ result }) => {
            if (result.status == 200) {
                const newPage = (result as any).data as PageMetadata;
                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>

我一直在寻找如何正确输入此内容一段时间，但一无所获，因此我们将不胜感激。

Answer 1

如果没有最低限度的可重复性，我无法给您一个非常完整的答案，但我相信将

if (result.status == 200)

更改为

if (result.type === 'success')

来验证增强器中的结果应该可以做到这一点，您的增强器将如下所示：

<form
    action="?/newPage"
    method="POST"
    use:enhance={({ cancel }) => {
        if (!loggedIn.state || offlineMode.state) {
            cancel();
            createNewLocalPage();
            return;
        }
        return async ({ result }) => {
            if (result.type === 'success'){
                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>

说明：根据 文档，您可能会收到诸如

Property 'data' does not exist on type 'ActionResult<Record<string, unknown> | undefined, Record<string, unknown> | undefined>'

之类的错误的原因可能来自于使用

result.status === 200

验证结果，因为它满足返回类型的所有形状，而有些则没有

data

属性。如果您的验证确保属性存在的形状，Typescript 将仅接受查找

result.data

。那将是

result.type === 'success' || result.type === 'failure'

行动结果 当通过 fetch 调用表单操作时，响应将是这些形状之一。

<form method="post" use:enhance={() => {
  return ({ result }) => {
      // result is of type ActionResult
  };
}}
type ActionResult<
  Success extends
      | Record<string, unknown>
      | undefined = Record<string, any>,
  Failure extends
      | Record<string, unknown>
      | undefined = Record<string, any>
> =
  | { type: 'success'; status: number; data?: Success }
  | { type: 'failure'; status: number; data?: Failure }
  | { type: 'redirect'; status: number; location: string }
  | { type: 'error'; status?: number; error: any };