TypeScript Academy · درس

النشر في المصفوفات والكائنات

انشروا القيم مع الحفاظ على أنواع دقيقة

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

نشر القيم

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

نشر المصفوفات

انشر مصفوفتين في مصفوفة جديدة لدمجهما. ويكون نوع عناصر الناتج اتحادًا لنوعي عناصر المصدرين.

const a = [1, 2]
const b = [3, 4]
const all = [...a, ...b]
console.log(all) // [1, 2, 3, 4]

دمج النشر والقيم الحرفية

يمكنك التناوب بين عناصر النشر والقيم الفردية. ويُحافظ على الترتيب تمامًا كما كُتب.

const middle = [2, 3]
const nums = [1, ...middle, 4]
console.log(nums) // [1, 2, 3, 4]

أنواع عناصر النشر

عندما تكون لمصادر النشر أنواع عناصر مختلفة، تكون النتيجة مصفوفة من اتحاد تلك الأنواع. ويمكنك تحديد النوع أو ترك الاستنتاج يتولى المهمة.

const ns: number[] = [1, 2]
const ss: string[] = ["a"]
const mixed = [...ns, ...ss] // (number | string)[]
console.log(mixed)

نشر الكائنات

ينسخ نشر الكائن الخصائص القابلة للتعداد الخاصة بالكائن إلى كائن جديد. ويجمع النوع الناتج بين بُنى المصادر.

const base = { id: 1, name: "Ada" }
const extended = { ...base, active: true }
console.log(extended) // { id: 1, name: 'Ada', active: true }

تجاوز الخصائص باستخدام النشر

عندما تتصادم المفاتيح، تكون الغلبة لـالأخير. انشر كائنًا ثم تجاوز حقولًا محددة — فهذا أساس التحديثات غير القابلة للتغيير.

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

الترتيب يحدد الغالب

تتبع أولوية الخصائص ترتيب المصادر. ضع التجاوزات بعد النشر لتكون لها الغلبة؛ أما قبل النشر، فسيستبدلها النشر.

const defaults = { theme: "light", size: "m" }
const result = { theme: "dark", ...defaults }
console.log(result.theme) // light — spread came last

نوع الخاصية التي جرى تجاوزها

إذا غيّر التجاوز نوع خاصية، يعكس النوع الناتج النوع الجديد. ويضيّق TypeScript النوع إلى آخر ظهور للخاصية.

const obj = { value: 1 as number }
const updated = { ...obj, value: "now a string" }
// updated.value is string
console.log(updated.value.toUpperCase())

عامل Spread يوفّر نسخة سطحية

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

const a = { nested: { x: 1 } }
const b = { ...a }
b.nested.x = 99
console.log(a.nested.x) // 99 — shared reference

عامل Spread وreadonly

يؤدي استخدام Spread على مصفوفة أو كائن readonly إلى إنشاء نسخة جديدة قابلة للتغيير. لا ينتقل المعدّل readonly عبر Spread، لأنك تنشئ قيمة جديدة.

const frozen: readonly number[] = [1, 2, 3]
const copy = [...frozen] // number[], mutable
copy.push(4)
console.log(copy.length) // 4

نمط التحديث غير القابل للتغيير

يُعد Spread الأسلوب الاصطلاحي لتحديث الحالة دون تغييرها: انسخ الكائن القديم، واستبدل الحقول التي تغيّرت، ثم أعد الكائن الجديد.

interface State { count: number; name: string }
function increment(s: State): State {
  return { ...s, count: s.count + 1 }
}
console.log(increment({ count: 1, name: "x" }))

اختبار سريع

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

مراجعة

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

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

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

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

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

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

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

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

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

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

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

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

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

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