TypeScript Academy · درس

أنواع تفكيك الكائنات

حدّدوا أنواع خصائص الكائنات المفككة من دون الخلط بينها وبين صيغة إعادة التسمية

أنواع تفكيك الكائنات درس مجاني في TypeScript Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في TypeScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة TypeScript Academy 4 دروس في المجموع.

التفكيك يلتقي بالأنواع

يستخرج تفكيك الكائنات الخصائص من كائن ويضعها في متغيرات محلية. ومع TypeScript، يمكنكم كتابة نوع البنية المفككة — لكن للصياغة فخ شهير. فلنستخدمها استخدامًا صحيحًا.

التفكيك الأساسي للكائنات

يستخرج التفكيك العادي الخصائص حسب أسمائها. ويستنتج TypeScript نوع كل متغير من الكائن المصدر.

const user = { name: "Ada", age: 36 }
const { name, age } = user
console.log(name, age) // Ada 36

كتابة نوع النمط بأكمله

لكتابة نوع المتغيرات المفككة، ضعوا النوع بعد النمط بأكمله، مع وصف بنية الكائن — وليس بعد كل متغير.

const { name, age }: { name: string; age: number } = {
  name: "Leo",
  age: 5,
}
console.log(name, age)

تفكيك معاملات الدوال

هذا نمط شائع جدًا: فككوا كائن المعامل مباشرةً في التوقيع، مع كتابة نوع بنيته. وداخل جسم الدالة، يكون name وid متغيرين محليين مكتوبَي النوع.

function greet({ name }: { name: string }) {
  return "Hi " + name
}
console.log(greet({ name: "Sam" }))

فخ الالتباس حول النقطتين

تعني النقطتان في التفكيك إعادة التسمية، لا كتابة النوع. إذ يؤدي استخدام { name: string } إلى إنشاء متغير اسمه string يحمل قيمة name — وهذا نادرًا ما يكون ما تريدونه.

const user = { name: "Ada" }
const { name: renamed } = user // renamed holds "Ada"
console.log(renamed) // Ada
// 'name' is NOT defined here

إعادة التسمية وتحديد النوع معًا

إذا كان عليك إعادة التسمية وتحديد النوع معًا، فأعد التسمية باستخدام النقطتين الرأسيتين، ثم حدّد نوع النمط بأكمله. ويظل تحديد البنية يستخدم أسماء الخصائص الأصلية.

const { name: who }: { name: string } = { name: "Ada" }
console.log(who) // Ada

استخدام نوع مُسمّى

بالنسبة إلى أي بنية غير بسيطة، يُفضّل استخدام واجهة مُسمّاة بدلًا من بنية مضمّنة. فهذا يجعل قراءتها أسهل ويتيح إعادة استخدامها.

interface User {
  name: string
  age: number
}
function show({ name, age }: User) {
  console.log(name + " is " + age)
}
show({ name: "Ada", age: 36 })

تفكيك بعض الخصائص فقط

لا يتعين عليك استخراج كل حقل. اختر ما تحتاج إليه؛ أما بقية نوع الكائن فتُتجاهل بالنسبة إلى المتغيرات المحلية التي تنشئها.

interface User { name: string; age: number; email: string }
function label({ name }: User) {
  return name.toUpperCase()
}
console.log(label({ name: "ada", age: 1, email: "a@b.c" }))

تفكيك القيم المُعادة

عندما تُعيد دالة كائنًا، يمكنك تفكيك النتيجة مباشرةً. فتنتقل الأنواع من نوع القيمة المُعادة إلى متغيراتك المحلية.

function makePoint(): { x: number; y: number } {
  return { x: 1, y: 2 }
}
const { x, y } = makePoint()
console.log(x + y) // 3

جمع الباقي

يجمع نمط rest الخصائص المتبقية في كائن جديد. ويحدّد TypeScript نوعه على أنه نوع المصدر بعد حذف المفاتيح المستخرجة.

interface User { id: number; name: string; age: number }
const u: User = { id: 1, name: "Ada", age: 36 }
const { id, ...rest } = u
console.log(id, rest.name, rest.age)

مراجعة: المضمّن مقابل المُسمّى

تُعدّ البنى المضمّنة مناسبة للأنماط الصغيرة والمستخدمة مرة واحدة. استخدم نوعًا مُسمّى بمجرد أن تكبر البنية أو تتكرر. وتذكّر: النقطتان الرأسيتان تعيدان التسمية، أما تحديد النوع فيأتي بعد القوس المعقوف الختامي.

interface Opts { verbose: boolean }
const run = ({ verbose }: Opts) => verbose ? "loud" : "quiet"
console.log(run({ verbose: true }))

تحقق سريع

اختبر مدى فهمك لتفكيك الكائنات مع تحديد أنواعها.

مراجعة

تأتي تحديدات النوع في تفكيك الكائنات بعد النمط بأكمله، وتصف بنية الكائن. أما النقطتان الرأسيتان داخل النمط فـتعيدان تسمية الارتباط، ولا تحددان نوعه. فكّك معاملات الدوال والقيم المُعادة باستخدام تحديدات البنية أو الأنواع المُسمّاة، واستخرج الحقول التي تحتاج إليها فقط، واستخدم نمط rest لجمع الباقي.

الأسئلة الشائعة

هل درس «أنواع تفكيك الكائنات» مجاني؟

نعم — نص درس «أنواع تفكيك الكائنات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة TypeScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة TypeScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «أنواع تفكيك الكائنات»؟

حدّدوا أنواع خصائص الكائنات المفككة من دون الخلط بينها وبين صيغة إعادة التسمية تتمرن على TypeScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ TypeScript Academy؟

لا تُشترط خبرة سابقة. TypeScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «أنواع تفكيك الكائنات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس TypeScript Academy هذا؟

نعم. كل درس في TypeScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى TypeScript Academy