我正在尝试将创建的对象从 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>
我一直在寻找如何正确输入此内容一段时间,但一无所获,因此我们将不胜感激。
如果没有最低限度的可重复性,我无法给您一个非常完整的答案,但我相信将
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 };