React Academy · पाठ

टाइप-सुरक्षित फ़ॉर्म और API प्रतिक्रिया अनुबंध

स्कीमा से TypeScript टाइप अनुमानित करने और फ़ॉर्म डेटा व API प्रतिक्रियाओं दोनों का मान्यकरण करने के लिए Zod का उपयोग करें।

पाठ 4, कुल 4 में से13 चरण

टाइप-सुरक्षित फ़ॉर्म और API प्रतिक्रिया अनुबंध, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

टाइप-सुरक्षित डेटा संरचनाएँ क्यों महत्वपूर्ण हैं

फ़ॉर्म और API प्रतिक्रियाएँ वे सीमाएँ हैं जहाँ अविश्वसनीय स्रोतों से डेटा आपके ऐप्लिकेशन में प्रवेश करता है। ज़ॉड से आप ऐसे स्कीमा परिभाषित कर सकते हैं जो रनटाइम पर सत्यापन भी करते हैं और TypeScript प्रकारों का अनुमान भी लगाते हैं।

ज़ॉड स्कीमा की मूल बातें

ज़ॉड के फ़्लुएंट API से स्कीमा परिभाषित करें। TypeScript प्रकार निकालने के लिए z.infer<typeof schema> का उपयोग करें।

import { z } from 'zod';

const UserSchema = z.object({
  id: z.string().uuid(),
  name: z.string().min(1).max(100),
  email: z.string().email(),
  age: z.number().int().min(0).max(150).optional(),
  role: z.enum(['admin', 'user', 'guest']),
});

type User = z.infer<typeof UserSchema>;
// { id: string; name: string; email: string; age?: number; role: 'admin'|'user'|'guest' }

ज़ॉड रिज़ॉल्वर के साथ React Hook Form

टाइप-सुरक्षित फ़ॉर्म सत्यापन के लिए ज़ॉड स्कीमा को React Hook Form के साथ एकीकृत करें — TypeScript फ़ॉर्म डेटा और त्रुटियों का आकार जानता है।

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';

const LoginSchema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'At least 8 characters'),
});
type LoginData = z.infer<typeof LoginSchema>;

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<LoginData>({
    resolver: zodResolver(LoginSchema),
  });

  const onSubmit = (data: LoginData) => {
    // data is LoginData — fully typed, already validated
  };
}

API प्रतिक्रियाओं का सत्यापन

सीमा पर आकार की असंगतियों को पकड़ने के लिए API प्रतिक्रियाओं को ज़ॉड से पार्स करें — यदि API अप्रत्याशित डेटा लौटाता है, तो कंपोनेंट के भीतर गहराई में रनटाइम क्रैश होने के बजाय आपको विस्तृत त्रुटि मिलती है।

async function fetchUser(id: string): Promise<User> {
  const res = await fetch(`/api/users/${id}`);
  const json = await res.json();
  return UserSchema.parse(json); // throws ZodError if shape is wrong
}

सहज त्रुटियों के लिए सुरक्षित पार्स

त्रुटि उत्पन्न करने के बजाय परिणाम ऑब्जेक्ट पाने के लिए schema.safeParse() का उपयोग करें — यह फ़ॉर्म सत्यापन के लिए आदर्श है, जहाँ आप उपयोगकर्ता को त्रुटियाँ दिखाना चाहते हैं।

const result = UserSchema.safeParse(formData);
if (!result.success) {
  const errors = result.error.flatten().fieldErrors;
  // { name: ['Must be at least 1 character'], email: ['Invalid email'] }
  return errors;
}
const user = result.data; // User — fully typed

Zod के साथ विभेदित यूनियन

सफलता या त्रुटि के ध्वज के आधार पर अलग-अलग संरचना वाले एपीआई प्रतिसादों का मॉडल बनाने के लिए z.discriminatedUnion का उपयोग करें।

const ApiResponse = z.discriminatedUnion('ok', [
  z.object({ ok: z.literal(true), data: UserSchema }),
  z.object({ ok: z.literal(false), error: z.string(), code: z.number() }),
]);

type ApiResult = z.infer<typeof ApiResponse>;
// { ok: true; data: User } | { ok: false; error: string; code: number }

Zod रूपांतरण

पार्सिंग के दौरान डेटा का प्रकार बदलने या उसकी संरचना पुनर्गठित करने के लिए .transform() का उपयोग करें — जैसे, दिनांक स्ट्रिंग को Date ऑब्जेक्ट में बदलना।

const DateSchema = z.string().transform(s => new Date(s));
// Input: '2024-01-15' → Output: Date object

const EventSchema = z.object({
  title: z.string(),
  date: z.string().pipe(z.coerce.date()),
});
type Event = z.infer<typeof EventSchema>;
// { title: string; date: Date }

स्कीमा का पुनः उपयोग

दोहराव से बचने के लिए आधार स्कीमा से निर्माण और अपडेट स्कीमा प्राप्त करें।

const UserSchema = z.object({ name: z.string(), email: z.string().email() });

// For creation: add password
const CreateUserSchema = UserSchema.extend({ password: z.string().min(8) });

// For update: all fields optional
const UpdateUserSchema = UserSchema.partial();

type CreateUser = z.infer<typeof CreateUserSchema>;
type UpdateUser = z.infer<typeof UpdateUserSchema>;

Zod के साथ सर्वर ऐक्शन

डेटाबेस तक पहुँचने से पहले Zod के साथ Next.js Server Action में फ़ॉर्म डेटा का सत्यापन करें।

async function createPost(formData: FormData) {
  'use server';
  const schema = z.object({ title: z.string().min(3), body: z.string().min(10) });
  const result = schema.safeParse(Object.fromEntries(formData));
  if (!result.success) return { errors: result.error.flatten().fieldErrors };
  await db.post.create({ data: result.data });
  revalidatePath('/blog');
  redirect('/blog');
}

फ्रंटएंड और बैकएंड के बीच साझा स्कीमा

साझा पैकेज से Zod स्कीमा एक्सपोर्ट करें, ताकि फ्रंटएंड और बैकएंड एक ही सत्यापन तर्क का उपयोग करें — एक ही स्कीमा सत्य का एकमात्र स्रोत हो।

// packages/schemas/src/user.ts
export const CreateUserSchema = z.object({ ... });
export type CreateUser = z.infer<typeof CreateUserSchema>;

// Frontend imports:
import { CreateUserSchema, CreateUser } from '@company/schemas';
// Backend imports:
import { CreateUserSchema } from '@company/schemas';

Zod त्रुटि संदेश

बेहतर उपयोगकर्ता अनुभव के लिए प्रत्येक फ़ील्ड के त्रुटि संदेशों को अनुकूलित करें — resolver के माध्यम से Zod उन्हें फ़ॉर्म के त्रुटि प्रदर्शन तक अपने-आप पहुँचा देता है।

const RegistrationSchema = z.object({
  username: z.string()
    .min(3, 'Username must be at least 3 characters')
    .max(20, 'Username cannot exceed 20 characters')
    .regex(/^[a-z0-9_]+$/, 'Only lowercase letters, numbers, and underscores'),
});

त्वरित जाँच

TypeScript में z.infer<typeof MySchema> क्या प्रदान करता है?

पुनरावलोकन

Zod स्कीमा को एक बार परिभाषित करें और TypeScript प्रकार प्राप्त करने के लिए z.infer का उपयोग करें। प्रकार-सुरक्षित सत्यापन के लिए React Hook Form में zodResolver का उपयोग करें। सीमा पर Zod के साथ एपीआई प्रतिसादों को पार्स करें, उपयोगकर्ता को दिखने वाली त्रुटियों के लिए safeParse का उपयोग करें, और साझा पैकेज के माध्यम से फ्रंटएंड तथा बैकएंड के बीच स्कीमा साझा करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ React सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
88
पाठ
324

अक्सर पूछे जाने वाले प्रश्न

क्या “टाइप-सुरक्षित फ़ॉर्म और API प्रतिक्रिया अनुबंध” पाठ निःशुल्क है?

हाँ—“टाइप-सुरक्षित फ़ॉर्म और API प्रतिक्रिया अनुबंध” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“टाइप-सुरक्षित फ़ॉर्म और API प्रतिक्रिया अनुबंध” में मैं क्या सीखूँगा?

स्कीमा से TypeScript टाइप अनुमानित करने और फ़ॉर्म डेटा व API प्रतिक्रियाओं दोनों का मान्यकरण करने के लिए Zod का उपयोग करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“टाइप-सुरक्षित फ़ॉर्म और API प्रतिक्रिया अनुबंध” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. कंपोनेंट वैरिएंट के लिए विभेदित यूनियन
  2. React में सशर्त और मैप किए गए टाइप
  3. 'as' प्रॉप वाले बहुरूपी कंपोनेंट
  4. टाइप-सुरक्षित फ़ॉर्म और API प्रतिक्रिया अनुबंध
← React Academy पर वापस जाएँ