في TypeScript، تعد الواجهات أداة قوية تستخدم لتحديد شكل الكائن. إنهم يفرضون فحص النوع، للتأكد من أن الكائنات التي تقوم بإنشائها تلتزم ببنية معينة. فيما يلي نظرة على الحالات المختلفة التي يتم فيها استخدام الواجهات بشكل شائع، بالإضافة إلى الأمثلة:

1. تحديد شكل الكائن

غالبًا ما تُستخدم الواجهات لتحديد بنية الكائن. وهذا يضمن أن أي كائن ملتصق بالواجهة سيكون له خصائص محددة.

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

const user: User = {
  name: "John Doe",
  age: 30,
  email: "[email protected]"
};

2. الخصائص الاختيارية

تسمح لك الواجهات بتحديد الخصائص الاختيارية باستخدام ؟ رمز. وهذا يعني أن الكائن قد يكون أو لا يمتلك تلك الخصائص.

interface Product {
  id: number;
  name: string;
  description?: string; // Optional property
}

const product: Product = {
  id: 1,
  name: "Laptop"
};

3. خصائص للقراءة فقط

يمكنك تعريف الخصائص للقراءة فقط، مما يعني أنه لا يمكن تغييرها بعد تهيئتها.

interface Config {
  readonly apiUrl: string;
  timeout: number;
}

const config: Config = {
  apiUrl: "https://api.example.com",
  timeout: 5000
};

// config.apiUrl = "https://newapi.example.com"; // Error: Cannot assign to 'apiUrl' because it is a read-only property.

4. أنواع الوظائف

يمكن استخدام الواجهات لتحديد شكل الوظائف، وتحديد أنواع المعلمات ونوع الإرجاع.

interface Login {
  (username: string, password: string): boolean;
}

const login: Login = (username, password) => {
  return username === "admin" && password === "admin123";
};

console.log(login("admin", "admin123")); // true

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

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

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

interface Employee extends Person {
  employeeId: number;
  department: string;
}

const employee: Employee = {
  name: "Alice",
  age: 28,
  employeeId: 12345,
  department: "Engineering"
};

6. تنفيذ الواجهات في الفصول الدراسية

يمكن للفصول تنفيذ واجهات، مما يضمن التزامها ببنية الواجهة.

interface Animal {
  name: string;
  makeSound(): void;
}

class Dog implements Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  makeSound() {
    console.log("Woof! Woof!");
  }
}

const dog = new Dog("Buddy");
dog.makeSound(); // Woof! Woof!

7. الأنواع القابلة للفهرسة

يمكن للواجهات وصف الكائنات التي لها خصائص بمفاتيح ديناميكية من نوع معين.

interface StringArray {
  [index: number]: string;
}

const myArray: StringArray = ["Hello", "World"];
console.log(myArray[0]); // Hello

8. الأنواع الهجينة

يمكن للواجهات تعريف الكائنات التي تعمل كوظيفة وككائن له خصائص.

interface Counter {
  (start: number): void;
  interval: number;
  reset(): void;
}

const counter: Counter = (function (start: number) {
  console.log("Counter started at", start);
} as Counter);

counter.interval = 1000;
counter.reset = () => {
  console.log("Counter reset");
};

counter(10);
console.log(counter.interval); // 1000
counter.reset();

9. دمج الواجهة

يسمح لك TypeScript بدمج إعلانات متعددة لنفس الواجهة، وهو أمر مفيد عند العمل مع قواعد تعليمات برمجية أو مكتبات كبيرة.

interface Box {
  height: number;
  width: number;
}

interface Box {
  color: string;
}

const myBox: Box = {
  height: 20,
  width: 15,
  color: "blue"
};

توفر الواجهات في TypeScript طريقة مرنة وقوية لتحديد أشكال الكائنات وتنفيذها، مما يتيح فحصًا قويًا للنوع وتعليمات برمجية واضحة وقابلة للصيانة.