TypeScript • المستوى الثاني • الدرس 4

الأدوات المساعدة المدمجة (Utility Types)

أهداف الدرس العلمية

استخدام Partial<T> لتحويل الواجهة إلى خصائص اختيارية عند التحديث.
استخدام Readonly<T> لحماية الكائنات من التعديل بعد الإنشاء.
استخراج خصائص محددة من واجهة قائمة باستخدام Pick<T, K>.
استبعاد خصائص معينة من الواجهة لإنشاء أنواع جديدة عبر Omit<T, K>.

1. ما هي الـ Utility Types؟

تُعد Utility Types أدوات تحويلية مدمجة في TypeScript تتيح لك اشتقاق أنواع جديدة وتعديل خصائص الواجهات الحالية بمرونة دون الحاجة لإعادة كتابة الأكواد من الصفر.

typescript

interface User {
  id: number;
  name: string;
  email: string;
}

// 1️⃣ Partial<T>: تجعل كل الحقول اختيارية (مفيدة لدوال update)
type UpdateUser = Partial<User>;

// 2️⃣ Pick<T, Keys>: تختار حقولاً محددة فقط
type UserHeader = Pick<User, "name" | "email">;

// 3️⃣ Omit<T, Keys>: تستبعد حقولاً محددة
type UserWithoutId = Omit<User, "id">;

2. أهم Utility Types الاستخدامية

🛠️ Partial & Required

Partial تجعل جميع الحقول اختيارية ?، بينما Required تجعل جميع الحقول إلزامية حتى لو تم إعلانها كاختيارية.

🔒 Readonly

تمنع إعادة تعيين أية قيمة لخصائص الكائن بعد حسابه وتمنح حماية برمجية كاملة أثناء التطوير.

التطبيق العملي المباشر

تحدي الدرس الرابع: تعديل البيانات واستخدام Pick

قم بالتعديل على الكود بداخل المحرر أدناه لتنفيذ ما يلي:

قم بإضافة حقل username بداخل كائن التحديث updateData المعتمد على Partial.
أنشئ نوعاً جديداً باسم UserPreview باستخراج حقول id و username من UserProfile عبر Pick.
أنشئ كائناً باسم userPreviewObj بالنوع UserPreview واطبع قيمته بالكونسول.
اضغط على "تشغيل الكود" لمعاينة النتائج والتحقق من القواعد.

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للمستوى الثالث