تفكيك الـ Tuples (Destructuring)
جزء من قسم Introduction To TypeScript في رحلة JavaScript على Coddy — الدرس 17 من 73.
بينما يعمل الوصول إلى عناصر الـ tuple عن طريق الفهرس (index) بشكل مثالي، هناك طريقة أكثر أناقة لاستخراج القيم من الـ tuples: تفكيك البنية (destructuring). تعمل هذه الميزة في JavaScript بسلاسة مع الـ tuples المحددة النوع في TypeScript، مما يسمح لك بتفريغ قيم الـ tuple في متغيرات منفصلة في سطر واحد.
يستخدم تفكيك المصفوفة (Array destructuring) الأقواس المربعة على الجانب الأيسر من عملية التعيين لإنشاء متغيرات جديدة تتوافق مع كل موضع في الصف (tuple):
let userInfo: [number, string] = [42, "Alice"];
let [id, name] = userInfo;
console.log(id); // 42 (يعرف TypeScript أن هذا رقم)
console.log(name); // "Alice" (يعرف TypeScript أن هذه سلسلة نصية)
التحدي
سهلأنشئ tuple باسم employee يحتوي على رقم (معرف الموظف) متبوعاً بسلسلة نصية (اسم الموظف). قم بتهيئته بالمعرف 1001 والاسم "Sarah Johnson".
استخدم التفكيك (destructuring) لاستخراج القيم من الـ tuple المسمى employee إلى متغيرين منفصلين باسم empId و empName.
أنشئ tuple آخر باسم coordinates يحتوي على رقمين يمثلان إحداثيات خط العرض وخط الطول. قم بتهيئته بالقيم 40.7128 و -74.0060.
استخدم التفكيك (destructuring) لاستخراج القيم من الـ tuple المسمى coordinates إلى متغيرين منفصلين باسم latitude و longitude.
اطبع المتغيرات المفككة بالترتيب التالي، كل منها في سطر منفصل:
- اطبع معرف الموظف
- اطبع اسم الموظف
- اطبع خط العرض
- اطبع خط الطول
جرّب بنفسك
// TODO: اكتب كودك هنا
// أنشئ tuple للموظف بالمعرف 1001 والاسم "Sarah Johnson"
// استخدم destructuring لاستخراج empId و empName
// أنشئ tuple للإحداثيات بالقيم 40.7128 و -74.0060 (تجنب استخدام 'location' كاسم متغير)
// استخدم destructuring لاستخراج latitude و longitude
// اطبع جميع المتغيرات الأربعة بالترتيب المحدد
// اطبع النتائج (قم بإزالة التعليق والتعديل حسب الحاجة)
// console.log(empId);
// console.log(empName);
// console.log(latitude);
// console.log(longitude);
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس Introduction To TypeScript
1البداية مع TS
ما هي TypeScript؟لماذا نستخدم TypeScript؟أول كود TypeScript لكعملية الـ Compilation والأخطاءملخص: مقدمة في TS4التعامل مع الدوال
تحديد أنواع المعاملات وقيم الإرجاعتحديد أنواع Arrow Functionsنوع الإرجاع 'void'المعاملات الاختيارية باستخدام '?'القيم الافتراضية للمعاملاتتحديد أنواع Rest Parametersتعريف أنواع الدوالملخص: بناء دوال محددة الأنواع
2الأنواع الأساسية
الأنواع الأساسية: str, num, booleanالنوع 'any': مخرج الهروبالنوع 'unknown'التعامل مع 'null' و 'undef'استنتاج الأنواع في التطبيق العمليتوضيحات الأنواع الصريحةمراجعة: تدريب على الأنواع الأساسية5الأنواع: الأسماء المستعارة، الاتحادات والتقاطعات
الأسماء المستعارة للأنواع الأساسية (Primitives)أنواع الاتحاد ('|')التعامل مع أنواع الاتحادالأنواع الحرفية (Literal Types)أنواع التقاطع ('&')دمج الأسماء المستعارة للأنواعملخص: تركيبات الأنواع المتقدمة3هياكل البيانات: المصفوفات و Tuple
المصفوفات محددة النوع (Typed Arrays)معدل 'readonly' للمصفوفاتما هو الـ Tuple؟تعريف والوصول إلى الـ Tuplesتفكيك الـ Tuples (Destructuring)الـ Tuples للقراءة فقط (Readonly)المصفوفات محددة النوع متعددة الأبعاداستخدام Spread Operator مع المصفوفاتملخص: المصفوفات و Tuples6تحديد أنواع الكائنات والواجهات
توصيف أنواع الكائنات المضمنة (Inline)الأسماء المستعارة للأنواع (Type Aliases) للكائناتمقدمة عن الواجهات (Interfaces)الواجهات (Interfaces) مقابل الأسماء المستعارة للأنواع (Type Aliases)الخصائص الاختيارية وخصائص القراءة فقط (Readonly)توسيع الواجهات والأنواعإضافة الدوال (Methods) إلى الواجهاتملخص: تحديد هياكل الكائنات