حالة النماذج

Form State

مفهوم ~18 دقيقة

حالة النماذج — Form State

النموذج ليس فقط قيم الحقول. هناك أخطاء، حالة إرسال، وربما رسالة نجاح. TypeScript يساعدك على تمثيل هذه الحالة بدلاً من توزيعها في متغيرات غير مرتبطة. اكتب type مثل SignupFormState يحتوي values, errors, وsubmitting.

عندما يكون شكل الحالة واضحاً، تصبح التحديثات أهدأ. لا تنسَ أن validation runtime ما زالت مطلوبة؛ النوع يقول إن email نص، لكنه لا يقول إنه بريد صالح.

مثال عملي

index.ts

type SignupFormState = {
  values: {
    name: string;
    email: string;
  };
  errors: string[];
  submitting: boolean;
};

const state: SignupFormState = {
  values: { name: "Sara", email: "sara@example.com" },
  errors: [],
  submitting: false,
};

console.log(state.values.email);

Output:

هذا النموذج يمكن استخدامه في React أو Vue أو حتى DOM يدوي.

تحدي — Challenge

type FormState = { errors: string[] };
const state: FormState = { errors: [] };

// اطبع errors=<العدد> — Print errors=<count>