الرئيسية/🔷 TypeScript/Interfaces و Types

الدرس 3 / 6⏱ 25 دقيقة

Interfaces و Types

تعريف هياكل البيانات

ما هي الواجهة؟

تُعرّف الواجهة شكل الكائن. تُحدد أي خصائص يجب أن يكون لدى الكائن وأنواع هذه الخصائص.

typescript
interface Person {
  name: string;
  age: number;
  email: string;
}

const person: Person = {
  name: 'Ahmed',
  age: 25,
  email: 'ahmed@example.com'
};

الخصائص الاختيارية والللقراءة فقط

تدعم الواجهات الخصائص الاختيارية (?) والخصائص للقراءة فقط:

typescript
interface Config {
  readonly apiUrl: string;
  timeout?: number;
  debug?: boolean;
}

💡 نقاط رئيسية:

readonly = لا يمكن تغييره بعد الإنشاء. ? = الخاصية اختيارية.

توسيع الواجهات

يمكن للواجهات التوسع من واجهات أخرى لإعادة الاستخدام والبناء على الأنواع الموجودة:

typescript
interface Animal {
  name: string;
  sound: string;
}

interface Dog extends Animal {
  breed: string;
  bark(): void;
}

أسماء الأنواع البديلة

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

typescript
type Point = {
  x: number;
  y: number;
};

type ID = string | number;

type Result = {
  success: boolean;
  data: any;
  error?: string;
};

💡 واجهة مقابل نوع:

استخدم interface للكائنات والكلاسات. استخدم type لأنواع الاتحاد والتقاطع وتعريفات الأنواع الأبسط.

أنواع التقاطع

تجمع أنواع التقاطع عدة أنواع في واحد:

typescript
type HasName = { name: string };
type HasAge = { age: number };

type Person = HasName & HasAge;
// يجب أن يحتوي Person على name و age معاً

ملخص الدرس

تُعرّف الواجهات شكل الكائنات

readonly يجعل الخصائص غير قابلة للتغيير

? يجعل الخصائص اختيارية

يمكن للواجهات التوسع من واجهات أخرى

أسماء الأنواع البديلة أكثر مرونة للاتحادات والتقاطعات

أنواع التقاطع (&) تجمع عدة أنواع

❓Quiz

ماذا يفعل المُعدّل readonly؟

❓Quiz

ما الفرق بين interface و type؟

❓Quiz

كيف تجمع نوعين في واحد؟

🎯بناء نظام أنواع

أنشئ واجهات لنظام مدونة: Post، User، Comment. استخدم extends للوراثة والخصائص الاختيارية وأنواع التقاطع.

الحل:

typescript
// Build a type system for a blog
interface Post {
  id: string;
  title: string;
  content: string;
  author: User;
  tags: string[];
  createdAt: Date;
}

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

interface Comment {
  id: string;
  postId: string;
  author: User;
  content: string;
}

// Use extends for inheritance
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// Use intersection types
type PostWithComments = Post & {
  comments: Comment[];
};

📋ملخص الواجهات والأنواع

مميزات الواجهة:

interface — يُعرّف شكل الكائن
readonly — الخاصية غير قابلة للتغيير
?: — خاصية اختيارية
extends — الوراثة من واجهة أخرى

أسماء الأنواع البديلة:

type — أكثر مرونة من interface
A & B — تقاطع (يجمع الأنواع)
A | B — اتحاد (A أو B)
type Point = { x: number; y: number }

🎤

أسئلة الانترفيو

متوسط

ما الفرق بين interface و type؟

الإجابة:

كلاهما يعرّف أشكال البيانات. Interface قابل للتمديد، type أكثر مرونة.

متوسط

متى نستخدم type بدلاً من interface؟

الإجابة:

لـ Union types و Intersection types و الأشكال المعقدة.

✨

نصائح وحيل

💡

استخدم Partial<T>

لجعل جميع الخصائص اختيارية في object

→

الدرس السابق

🔷 الأنواع الأساسية

الدرس التالي

🔷 الدوال والأنواع العامة

←

جاري التحميل...

ما هي الواجهة؟

تُعرّف الواجهة شكل الكائن. تُحدد أي خصائص يجب أن يكون لدى الكائن وأنواع هذه الخصائص.

typescript
interface Person {
  name: string;
  age: number;
  email: string;
}

const person: Person = {
  name: 'Ahmed',
  age: 25,
  email: 'ahmed@example.com'
};

الخصائص الاختيارية والللقراءة فقط

تدعم الواجهات الخصائص الاختيارية (?) والخصائص للقراءة فقط:

typescript
interface Config {
  readonly apiUrl: string;
  timeout?: number;
  debug?: boolean;
}

💡 نقاط رئيسية:

readonly = لا يمكن تغييره بعد الإنشاء. ? = الخاصية اختيارية.

أسماء الأنواع البديلة

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

typescript
type Point = {
  x: number;
  y: number;
};

type ID = string | number;

type Result = {
  success: boolean;
  data: any;
  error?: string;
};

💡 واجهة مقابل نوع:

استخدم interface للكائنات والكلاسات. استخدم type لأنواع الاتحاد والتقاطع وتعريفات الأنواع الأبسط.

ملخص الدرس

تُعرّف الواجهات شكل الكائنات

readonly يجعل الخصائص غير قابلة للتغيير

? يجعل الخصائص اختيارية

يمكن للواجهات التوسع من واجهات أخرى

أسماء الأنواع البديلة أكثر مرونة للاتحادات والتقاطعات

أنواع التقاطع (&) تجمع عدة أنواع

// Build a type system for a blog interface Post { id: string; title: string; content: string; author: User; tags: string[]; createdAt: Date; } interface User { id: string; name: string; email: string; } interface Comment { id: string; postId: string; author: User; content: string; } // Use extends for inheritance interface AdminUser extends User { role: 'admin'; permissions: string[]; } // Use intersection types type PostWithComments = Post & { comments: Comment[]; };