Számos Next.js alkalmazáson dolgoztam, és különféle könyvtárakkal találkoztam, amelyek segítenek robusztus és méretezhető alkalmazások létrehozásában. Az egyik ilyen könyvtár, amely a közelmúltban nagy népszerűségre tett szert, a Zod. A Zod egy TypeScript-első sémaérvényesítési könyvtár, amely tömör és típusbiztos módot biztosít a bemenetek, kimenetek és API-válaszok érvényesítésére. Másrészt a TypeScript generikus termékei hatékony módot biztosítanak olyan újrafelhasználható kód létrehozására, amely különböző adattípusokkal működik. Ebben a cikkben megvizsgáljuk a Zod és a generikus termékek Next.js alkalmazásban való kombinálásának előnyeit.
Zod áttekintése
Mielőtt belemerülnénk a Zod és a generikus gyógyszerek kombinálásának előnyeibe, először nézzük meg, mi is az a Zod, és hogyan működik. A Zod egy TypeScript-első sémaérvényesítési könyvtár, amely tömör és típusbiztos módot biztosít a bemenetek, kimenetek és API-válaszok érvényesítésére. A Zod-ot úgy tervezték, hogy könnyen használható és érthető legyen, miközben hatékony érvényesítési képességeket biztosít.
A Zod segítségével az érvényesítési sémát a TypeScript típusrendszerével határozza meg. Tegyük fel például, hogy van egy API-ja, amely egy adott tulajdonságkészlettel rendelkező objektumot ad vissza. A Zod objektum() metódusával definiálhat egy sémát ehhez az objektumhoz:
import { object, string, number } from 'zod';
const mySchema = object({
name: string(),
age: number(),
});
Ebben a példában egy objektumhoz definiáltunk egy sémát két tulajdonsággal: name, amely egy karakterlánc, és age, amely egy szám. Most, amikor egy objektumot kapunk az API-tól, a mySchema.validate() metódussal ellenőrizhetjük azt. Ha az objektum nem egyezik a sémával, a Zod hibát jelez.
const data = { name: 'John', age: '30' };
mySchema.validate(data); // Throws an error because age is a string instead of a number
Ez csak egy egyszerű példa arra, hogy mit tehet Zoddal. A Zod számos más típusú érvényesítést támogat, beleértve a tömböket, enumokat, uniókat és még sok mást. Egyéni érvényesítőket is létrehozhat, és a Zod láncolási szintaxisát használhatja összetett érvényesítési sémák felépítéséhez.
A Zod és a Generics kombinálásának előnyei
Most, hogy megértettük, mi az a Zod, és hogyan működik, vizsgáljuk meg a Zod és a generikus gyógyszerek Next.js alkalmazásban való kombinálásának előnyeit.
1. Továbbfejlesztett típusbiztonság
A típusbiztonság döntő szempont a méretezhető és karbantartható alkalmazások építésekor. A TypeScript és Zod használatával biztosíthatjuk, hogy adataink mindig a megfelelő típusú és alakúak legyenek. Alkalmazásunk növekedésével azonban előfordulhat, hogy ugyanazt az érvényesítő kódot ismételjük meg több összetevőben és oldalon.
Itt jönnek be a TypeScript általános formái. Az általánosok lehetőséget biztosítanak olyan újrafelhasználható kód létrehozására, amely különböző adattípusokkal működik. A Zod és a generikumok kombinálásával újrafelhasználható érvényesítési függvényeket hozhatunk létre, amelyek az egész alkalmazásunkban használhatók.
Tegyük fel például, hogy van egy API-végpontunk, amely a felhasználók listáját adja vissza. Létrehozhatunk egy általános érvényesítési függvényt, amely bevesz egy sémát és az érvényesítendő adatok listáját.
import { TypeOf, ZodType } from 'zod';
function validateList<T extends ZodType<any>>(schema: T, data: unknown[]): TypeOf<T>[] {
const parsedData = data.map((item) => schema.parse(item));
return parsedData;
}
Ebben a példában egy validateList függvényt definiáltunk, amely bevesz egy sémát és az érvényesítendő adatok listáját. A függvény a TypeScript TypeOf segédprogram típusát használja, hogy a séma alapján következtessen az adatok típusára. Ezzel biztosíthatjuk, hogy a függvény visszatérési típusa megegyezzen a séma alapján elvárt típussal.
Mostantól ezt az általános érvényesítési funkciót a teljes alkalmazásunkban használhatjuk különböző adattípusok listáinak érvényesítésére.
import { object, string, number } from 'zod';
interface User {
name: string;
age: number;
}
const userSchema = object({
name: string(),
age: number(),
});
const users: unknown[] = [
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
];
const validatedUsers = validateList(userSchema, users); // Returns an array of User objects with correct types and shape
Ebben a példában definiáltunk egy sémát egy felhasználói objektumhoz, és a validateList függvénnyel ellenőriztük a felhasználók listáját. A validatedUsers változó mostantól a megfelelő típusú és alakú felhasználói objektumok tömbjét fogja tartalmazni.
A generikus és a Zod együttes használatával újrafelhasználható és típusbiztos érvényesítési funkciókat hozhatunk létre, amelyek a teljes alkalmazásunkban használhatók, javítva ezzel kódbázisunk általános típusbiztonságát.
2. Egyszerűsített érvényesítési logika
A Zod és a generikumok kombinálásának másik előnye az egyszerűsített érvényesítési logika. Alkalmazásunk növekedésével bonyolult érvényesítési logikával találkozhatunk, amelyet nehéz megérteni és fenntartani. A Zod sémaellenőrzésének és a TypeScript generikáinak használatával leegyszerűsíthetjük érvényesítési logikánkat, és könnyebben érthetővé tehetjük.
Tegyük fel például, hogy van egy űrlapunk, amelynél több mezőt kell ellenőrizni. Létrehozhatunk egy általános érvényesítési függvényt, amely egy sémát és egy adatobjektumot vesz fel az érvényesítéshez.
import { TypeOf, ZodType } from 'zod';
function validateObject<T extends ZodType<any>>(schema: T, data: unknown): TypeOf<T> {
const parsedData = schema.parse(data);
return parsedData;
}
Ebben a példában egy validateObject függvényt definiáltunk, amely egy sémát és egy adatobjektumot vesz fel az érvényesítéshez. A függvény a TypeScript TypeOf segédprogram típusát használja, hogy a séma alapján következtessen az adatok típusára. Ezzel biztosíthatjuk, hogy a függvény visszatérési típusa megegyezzen a séma alapján elvárt típussal.
Most már használhatjuk ezt az általános érvényesítési függvényt űrlapunk érvényesítési logikájának egyszerűsítésére.
import { object, string, number } from 'zod';
interface FormValues {
firstName: string;
lastName: string;
age: number;
}
const formSchema = object({
firstName: string(),
lastName: string(),
age: number(),
});
function onSubmit(formData: unknown) {
const validatedData = validateObject(formSchema, formData);
// Do something with validatedData
}
Ebben a példában definiáltunk egy sémát az űrlapunkhoz, és a validateObject függvényt használtuk az űrlapadatok érvényesítésére. A validatedData változó mostantól tartalmazza a megfelelő típusú és alakú űrlapadatokat.
A generikus és a Zod együttes használatával egyszerűsíthetjük érvényesítési logikánkat, és könnyebben érthetővé és karbantarthatóvá tehetjük.
3. Fokozott kód újrafelhasználhatóság
Végül a Zod és a generikumok kombinálása megnövelheti a kód újrafelhasználhatóságát. Amint azt korábban említettük, az általánosok hatékony módot biztosítanak újrafelhasználható kód létrehozására, amely különböző adattípusokkal működik. A Zod sémaellenőrzésének és a TypeScript generikáinak használatával újrafelhasználható érvényesítési függvényeket hozhatunk létre, amelyek a teljes alkalmazásunkban használhatók.
Tegyük fel például, hogy van egy Next.js alkalmazásunk, amelynek több oldala van, és érvényesítést igényel. Létrehozhatunk egy újrafelhasználható érvényesítési függvényt, amely egy sémát és űrlapadatokat vesz fel az érvényesítéshez.
import { TypeOf, ZodType } from 'zod';
export function validateFormData<T extends ZodType<any>>(schema: T,
formData: unknown
): TypeOf<T> {
const parsedData = schema.parse(formData);
return parsedData;
}
Ebben a példában létrehoztunk egy "validateFormData" függvényt, amely egy sémát és űrlapadatokat vesz fel az ellenőrzéshez. A függvény a TypeScript `TypeOf` segédprogramtípusát használja, hogy a séma alapján következtessen az adatok típusára. Ezzel biztosíthatjuk, hogy a függvény visszatérési típusa megegyezzen a séma alapján elvárt típussal. Mostantól ezt az újrafelhasználható érvényesítési funkciót a teljes alkalmazásunkban használhatjuk különböző űrlapok érvényesítésére.
import { object, string, number } from 'zod';
import { validateFormData } from '../utils/validation';
interface LoginFormValues {
username: string;
password: string;
}
const loginFormSchema = object({
username: string(),
password: string(),
});
function onLogin(formData: unknown) {
const validatedData = validateFormData(loginFormSchema, formData);
// Do something with validatedData
}
interface SignUpFormValues {
email: string;
password: string;
confirmPassword: string;
}
const signUpFormSchema = object({
email: string(),
password: string(),
confirmPassword: string(),
});
function onSignUp(formData: unknown) {
const validatedData = validateFormData(signUpFormSchema, formData);
// Do something with validatedData
}
Ebben a példában két különböző sémát definiáltunk egy bejelentkezési és egy regisztrációs űrlaphoz, és a validateFormData függvényt használtuk az űrlapadatok érvényesítésére. A validateFormData függvényt a teljes alkalmazásunkban újra felhasználhatjuk különböző űrlapok érvényesítésére, csökkentve ezzel a kódduplikációt és javítva a karbantarthatóságot.
A Zod és a generikumok kombinálásával újrafelhasználható és típusbiztos érvényesítési funkciókat hozhatunk létre, amelyek az egész alkalmazásunkban használhatók, javítva a kód általános újrafelhasználhatóságát és karbantarthatóságát.
Ebben a cikkben megvizsgáltuk a Zod és a generikus gyógyszerek Next.js alkalmazásban való kombinálásának előnyeit. Megmutattuk, hogy a Zod sémaellenőrzése és a TypeScript generikusai hogyan működhetnek együtt újrafelhasználható és típusbiztos érvényesítési funkciók létrehozásában, amelyek az egész alkalmazásban használhatók.
Az általános és a Zod együttes használatával típusbiztosabb, egyszerűbb és újrafelhasználható kódot hozhatunk létre. Ez egy karbantarthatóbb és skálázható alkalmazáshoz vezethet, kevesebb hibával és kevesebb kódduplikációval.
Szoftvermérnökként fontos, hogy naprakész maradjon a legújabb eszközökkel és technikákkal a kódminőség és a termelékenység javítása érdekében. A Zod és a generics használatával a Next.js alkalmazásban kihasználhatja a típusbiztonság, az egyszerűsített érvényesítési logika és a fokozott kód-újrafelhasználhatóság előnyeit.
Ha tetszett, amit olvastál, segíthetsz nekem, és veszel nekem egy csésze kávét?
