Weboldal keresés

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 Warning
Property '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 :

  1. Lehetséges több mint 1 hibát küldeni egy +page.server.ts fájlból?
  2. Hogyan tudom helyesen javítani ezeket a típusfigyelmeztetéseket?
  3. 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.ts
export 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.