typescript - Sveltekit-ben vissza tudsz adni 2 sikertelen ActionResults-t?
Van egy űrlapműveletem a +page.server.ts fájlomban, és egy fail-t adok vissza, ha a zod séma ellenőrzése sikertelen, ami működik. Azonban, amikor egy másik fail-t adok vissza, amikor a PocketBase hibát dob azzal, hogy az e-mail már használatban van, minden mezőre, kivéve az e-mailt, típushibát kapok.
Typescript WarningProperty 'password' does not exist on type '{ password?: string[] | undefined; passwordConfirm?: string[] | undefined; email?: string[] | undefined; name?: string[] | undefined; terms?: string[] | undefined; } | { email: string[]; }'.
Property 'password' does not exist on type '{ email: string[]; }'
Kérdések :
- Lehetséges több mint 1 hibát küldeni egy
+page.server.tsfájlból? - Hogyan tudom helyesen javítani ezeket a típusfigyelmeztetéseket?
- Jól csinálom ezt, ha nem, hogyan tudnám kijavítani?
+page.svelte...
<input id="password"
name="password"
type="password"
placeholder="Password"
class="input input-bordered w-full"
/>
<label class="label" for="password">
{#if form?.errors?.password}
<!--^^^Type Error Here-->
<span class="label-text-alt text-error">{form?.errors?.password[0]}</span>
<!--^^^Type Error Here-->
{/if}
</label>
...
//Type of errors coming from +page.server.ts into +page.svelte
(property) errors: {
password?: string[] | undefined;
passwordConfirm?: string[] | undefined;
email?: string[] | undefined;
name?: string[] | undefined;
terms?: string[] | undefined;
} | {
email: string[];
} | undefined
+page.server.tsexport const actions: Actions = {
default: async ({ locals, request }) => {
const formData = Object.fromEntries(await request.formData()) as {
email: string;
password: string;
passwordConfirm: string;
name: string;
terms: string;
};
const result = registerSchema.safeParse(formData);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { password, passwordConfirm, ...rest } = formData;
if (!result.success) {
const { fieldErrors: errors } = result.error.flatten();
const data = {
data: rest,
errors
};
return fail(400, data);
}
try {
await locals.pb.collection('users').create(formData);
await locals.pb.collection('users').authWithPassword(formData.email, formData.password);
} catch (e) {
if (e instanceof ClientResponseError) {
const data = {
data: rest,
errors: {
email: ['Email already exists']
}
};
return fail(400, data);
}
throw error(500, 'Something went wrong');
}
throw redirect(303, '/');
}
};
Válasz #1
Csak egy sikertelen eredményt tud visszaadni.
Ha megtartod a két hibás eredményt, de javítani szeretnéd a TS problémát, deklarálhatsz egy típust, és kijelentheted, hogy az email ellenőrzés hibái megfelelnek neki. Pl.
const formData = Object.fromEntries(await request.formData()) as {
email: string;
password: string;
};
const schema = z.object({
email: z.string().email(),
password: z.string().min(8),
});
// This matches errors of Zob validation
type Errors = Partial<Record<keyof typeof formData, string[]>>;
const result = schema.safeParse(formData);
if (!result.success) {
return fail(400, {
errors: result.error.flatten().fieldErrors,
});
}
if (formData.email == '[email ') {
return fail(400, {
errors: {
email: ['already exists'],
} as Errors, // This ensures that the errors type is the same
});
}
return { message: 'ok' };
Ne feledje, hogy az as Errors nem fogja elkapni a felesleges tulajdonságokat. Tehát ha elgépel egy tulajdonságot, nem kap fordítási hibát.
Az errors típusa a függvény által visszaadható összes lehetséges értékből származik, így ha először az összes hibát egy objektumba egyesíted, és csak egy sikertelen eredményt adsz vissza, a típuseltérésnek már az egyesítés során meg kell oldódnia.
Ha lenne aszinkron validációs támogatás a Zodban, egyszerűen így végezhetnéd el a teljes validációt. Jelenleg valószínűleg manuálisan kellene csinálnod, vagy valamilyen objektum-összevonó könyvtárat kellene használnod.
