TypeScript Academy · درس

أنماط التفكيك المتداخلة

حدّدوا أنواع تعبيرات التفكيك المتداخلة بعمق

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

الوصول إلى البيانات المتداخلة

يستخرج التفكيك المتداخل القيم من كائنات داخل كائنات في تعليمة واحدة. وهو موجز، لكنه يتفاعل مع الأنواع بطرق تستحق الفهم — وقد يضر بقابلية القراءة إذا أُفرط في استخدامه.

تفكيك خاصية متداخلة

حاكِ بنية الكائن في الجانب الأيسر. وللوصول إلى data.user.name، ضع نمطًا متداخلًا تحت user.

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

لا يُنشأ ارتباط للاسم الخارجي

انتبه إلى هذا الفخ الدقيق: في { user: { name } }، يكون user مجرد مسار، وليس ارتباطًا. وستحصل على name، لكن لن يوجد بعد ذلك متغير يُسمى user.

const data = { user: { name: "Ada" } }
const { user: { name } } = data
console.log(name) // Ada
// console.log(user) // Error: user is not defined

تحديد نوع التفكيك المتداخل

حدّد النوع باستخدام البنية المتداخلة الكاملة بعد النمط. ويعكس كل مستوى بنية الكائن.

const { user: { name } }: { user: { name: string } } = {
  user: { name: "Leo" },
}
console.log(name)

الأنواع المُسمّاة أسهل قراءة

سرعان ما تصبح البنى المتداخلة المضمّنة مرهقة. وتحافظ الواجهة المُسمّاة على نظافة تحديد النوع، مع السماح باستخراج القيم المتداخلة.

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

استخراج المستويين معًا

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

interface Data { user: { name: string } }
const data: Data = { user: { name: "Ada" } }
const { user } = data
const { name } = user
console.log(user, name)

دمج التداخل مع القيم الافتراضية

يمكن أن تظهر القيم الافتراضية في أي مستوى. وفّر قيمة بديلة لحقل متداخل قد يكون مفقودًا في الموضع الذي تربطه فيه مباشرةً.

interface Opts { theme?: { color?: string } }
function style({ theme: { color = "black" } = {} }: Opts = {}) {
  return color
}
console.log(style()) // black

تعيين قيمة افتراضية للكائنات الفرعية المفقودة

عندما يكون كائن متداخل بأكمله قابلًا للغياب، عيّنه إلى {} قبل تفكيك حقوله — وإلا فسيؤدي الوصول إلى خاصية في undefined إلى إلقاء خطأ.

interface Cfg { db?: { host?: string } }
const { db: { host = "localhost" } = {} }: Cfg = {}
console.log(host) // localhost

مصفوفة متداخلة داخل كائن

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

const post = { meta: { tags: ["ts", "js"] } }
const { meta: { tags: [firstTag] } } = post
console.log(firstTag) // ts

مفاضلات قابلية القراءة

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

// Hard to read:
// const { a: { b: { c = 0 } = {} } = {} } = obj
// Clearer:
// const a = obj.a ?? {}
// const c = a.b?.c ?? 0

مثال متوازن

يكون مستوى واحد من التداخل مع حقلين عادةً هو الحل الأمثل — موجزًا من دون أن يكون غامضًا.

interface Resp { data: { id: number; title: string } }
function render({ data: { id, title } }: Resp) {
  return id + ": " + title
}
console.log(render({ data: { id: 1, title: "Hi" } }))

تحقق سريع

اختبر مدى فهمك للتفكيك المتداخل.

مراجعة

يحاكي التفكيك المتداخل بنية الكائن للوصول إلى القيم الداخلية؛ فالمفاتيح الخارجية مسارات وليست ارتباطات، ولذلك تصبح الأسماء الداخلية فقط متغيرات. حدّد النوع باستخدام البنية المتداخلة الكاملة أو نوع مُسمّى، وعيّن للكائنات الفرعية المفقودة القيمة {} قبل تفكيك حقولها، وامزج أنماط المصفوفات عند الحاجة. حافظ على التداخل سطحيًا، وقسّم الأنماط العميقة إلى خطوات لتحسين قابلية القراءة.

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

هل درس «أنماط التفكيك المتداخلة» مجاني؟

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

ماذا ستتعلم في «أنماط التفكيك المتداخلة»؟

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

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

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

كم من الوقت يستغرق درس «أنماط التفكيك المتداخلة»؟

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

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

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

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

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