أنواع التقاطع في TypeScript
تشرح هذه المقالة أنواع التقاطع في TypeScript۔
YouTube Video
أنواع التقاطع في TypeScript
في TypeScript، أنواع التقاطع هي طريقة لدمج أنواع متعددة لإنشاء نوع جديد۔
ما هي أنواع التقاطع؟
تسمح أنواع التقاطع بدمج أنواع متعددة لتعريف نوع جديد يحتوي على جميع خصائص تلك الأنواع۔ تُعرَّف أنواع التقاطع باستخدام الرمز & وتتطلب جميع الخصائص من كل نوع مكون۔
مثال:
1type A = { name: string };
2type B = { age: number };
3
4type C = A & B;
5
6const person: C = {
7 name: "John Doe",
8 age: 30
9};في هذا الكود، عن طريق تعريف type C = A & B، يصبح النوع C نوع كائن يحتوي على الخصائص name (نوع string) وage (نوع number)۔
فوائد أنواع التقاطع
باستخدام أنواع التقاطع، يمكنك إعادة استخدام الأنواع الموجودة وتعريف أنواع أكثر مرونة وتركيبًا۔ هذا يعزز من قابلية صيانة الكود وتطويره۔ بالإضافة إلى ذلك، يمكن لأنواع التقاطع تطبيق قيود أنواع مختلفة متعددة في نفس الوقت، مما يعزز سلامة الأنواع۔
الفوائد:
- إعادة الاستخدام: عن طريق دمج أنواع متعددة، يمكنك تقليل التعريفات المكررة وإعادة استخدام الأنواع الموجودة۔
- سلامة الأنواع: تعزز أنواع التقاطع التحقق من الأنواع عن طريق السماح فقط بالكائنات التي تلبي شروط أنواع متعددة۔
حالات استخدام أنواع التقاطع
تعتبر أنواع التقاطع مفيدة للغاية عند توسيع الكائنات أو الواجهات۔ على وجه الخصوص، تكون مفيدة عندما تريد تمثيل كائنات ذات خصائص متعددة۔
حالة استخدام 1: كائنات ذات واجهات متعددة
1interface Drivable {
2 drive(): void;
3}
4
5interface Flyable {
6 fly(): void;
7}
8
9type Vehicle = Drivable & Flyable;
10
11const car: Vehicle = {
12 drive() {
13 console.log("Driving on the road");
14 },
15 fly() {
16 console.log("Flying in the sky");
17 }
18};
19
20car.drive(); // "Driving on the road"
21car.fly(); // "Flying in the sky"
في هذا المثال، يتم تعريف النوع Vehicle كنوع تقاطع يجمع بين Drivable وFlyable۔ يجب على كائن من النوع Vehicle تنفيذ كل من الطريقتين drive() وfly()۔
حالة استخدام 2: دمج الفئات مع أنواع التقاطع
من خلال دمج الفئات وأنواع التقاطع، من الممكن إنشاء كائنات تحتوي على خصائص واجهات متعددة۔
1interface Person {
2 name: string;
3}
4
5interface Employee {
6 employeeId: number;
7}
8
9type PersonEmployee = Person & Employee;
10
11class CompanyWorker implements PersonEmployee {
12 constructor(public name: string, public employeeId: number) {}
13
14 getDetails() {
15 return `${this.name}, Employee ID: ${this.employeeId}`;
16 }
17}
18
19const worker = new CompanyWorker("Alice", 123);
20console.log(worker.getDetails()); // "Alice, Employee ID: 123"
هنا، نستخدم نوع التقاطع PersonEmployee بين Person وEmployee لجعل فئة CompanyWorker تحتوي على خصائص الاثنين۔
النقاط التي يجب أخذها بعين الاعتبار مع الأنواع المشتركة
النقطة المهمة عند استخدام الأنواع المشتركة هي الانتباه إلى إمكانية حدوث تعارض في الخصائص۔ إذا كانت الخصائص ذات الاسم نفسه تحتوي على تعليقات توضيحية مختلفة للنوع عبر أنواع مختلفة، فقد يحدث خطأ۔
مثال على الحذر:
1type A = { id: number };
2type B = { id: string };
3
4type C = A & B;
5
6// Error: Type 'number' and 'string' are not compatible
7const obj: C = {
8 id: 1
9};في هذا المثال، تتعارض خصائص id الخاصة بـ A و B، مما يتسبب في حدوث خطأ عند تعريف كائن من النوع C۔ في مثل هذه الحالات، يلزم إجراء مراجعة للتصميم لتجنب تعارض الخصائص۔
مثال على الكود مع تعليقات توضيحية للأنواع المشتركة
أخيرًا، هذا مثال حقيقي على الكود يتضمن تعليقات توضيحية للنوع۔
مثال 1: عرض تفاصيل الكائن
1type ContactInfo = { phone: string; email: string };
2type Address = { city: string; postalCode: string };
3
4type PersonDetails = ContactInfo & Address;
5
6const details: PersonDetails = {
7 phone: "123-4567",
8 email: "example@mail.com",
9 city: "New York",
10 postalCode: "10001"
11};
12
13console.log(details);مثال 2: كائن بخصائص إضافية
1interface BasicInfo {
2 name: string;
3 age: number;
4}
5
6interface WorkInfo {
7 company: string;
8 position: string;
9}
10
11type FullInfo = BasicInfo & WorkInfo;
12
13const employee: FullInfo = {
14 name: "Bob",
15 age: 28,
16 company: "Tech Corp",
17 position: "Engineer"
18};
19
20console.log(`${employee.name} is a ${employee.position} at ${employee.company}`);الخاتمة
أنواع التقاطع في TypeScript هي ميزة قوية لجمع أنواع متعددة في نوع جديد۔ هذا يعزز قابلية إعادة استخدام الكود وسلامته، مما يتيح تعريفات نوع معقدة۔ باستخدام مرونة التصميم بفعالية مع الحذر من تعارض الأنواع، يمكنك تحقيق كود قوي وسهل القراءة للغاية۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔