التحقق من البيانات في TypeScript: Zod وYup وJoi

التحقق من البيانات في TypeScript: مراجعة الأدوات والممارسات

في تطوير الويب الحديث باستخدام TypeScript، إحدى المهام الرئيسية هي ضمان سلامة البيانات. حتى مع الكتابة الثابتة الصارمة في TypeScript، لا يمكن ضمان أن البيانات القادمة من العالم الخارجي (API، النماذج، localStorage) تتوافق مع التنسيق المتوقع. هنا يأتي دور التحقق في وقت التشغيل (runtime-validacija) — التحقق من البيانات أثناء تنفيذ البرنامج. في هذه المقالة، سنستعرض ثلاث مكتبات شائعة: Zod وYup وJoi، ونقارن بين أساليبها ونوضح كيفية دمج التحقق في مشروع TypeScript.

لماذا لا تكفي الأنواع البسيطة في TypeScript؟

يتحقق TypeScript من الأنواع في مرحلة التجميع، ولكن في وقت التشغيل، يتم مسح جميع التعليقات التوضيحية. هذا يعني أن:

بيانات المستخدم قد تحتوي على حقول إضافية أو تفتقد إلى الحقول الإلزامية
الأرقام قد تأتي في شكل نصوص
الكائنات قد تكون null أو undefined

تحل مكتبات التحقق هذه المشكلة من خلال توفير مخططات تعمل كتحقق وكاستنتاج للأنواع في نفس الوقت.

1. Zod — المعيار الحديث

Zod هي المكتبة الأكثر شيوعًا للتحقق في TypeScript. ميزتها الرئيسية هي الاستنتاج التلقائي لأنواع TypeScript من المخططات.

التثبيت

npm install zod

مثال على مخطط أساسي

import { z } from 'zod';

const UserSchema = z.object({  id: z.number().positive(),  name: z.string().min(2).max(50),  email: z.string().email(),  age: z.number().int().min(18).optional(),});

// استنتاج النوع: { id: number; name: string; email: string; age?: number }type User = z.infer<typeof UserSchema>;

// التحققconst result = UserSchema.safeParse(inputData);if (!result.success) {  console.error(result.error.errors);} else {  // result.data — بيانات صحيحة من النوع User  processUser(result.data);}

الإمكانيات المتقدمة

التحويل: z.string().transform(val => val.trim())
الاتحادات المميزة: z.discriminatedUnion('type', [...])
المخططات التكرارية: z.lazy(() => NodeSchema)
الأخطاء المخصصة: z.string().refine(val => !val.includes('bad'), 'لا يمكن استخدام كلمة bad')

2. Yup — أداة مجربة عبر الزمن

Yup هي مكتبة ذات تاريخ غني، تم إنشاؤها في الأصل للتحقق من النماذج. تتكامل بشكل ممتاز مع Formik وReact Hook Form.

التثبيت

npm install yup

مثال على مخطط

import * as yup from 'yup';

const productSchema = yup.object({  title: yup.string().required('العنوان إلزامي').min(3),  price: yup.number().positive('يجب أن يكون السعر موجبًا').required(),  inStock: yup.boolean().default(true),});

type Product = yup.InferType<typeof productSchema>;

// التحققproductSchema.validate(inputData, { abortEarly: false })  .then(validData => console.log(validData))  .catch(err => console.error(err.errors));