TypeScript Academy · درس

دمج ?. و??

اجمعوا السلسلة الاختيارية مع قيم افتراضية مناسبة

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

اقتران مثالي

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

type User = { profile?: { name?: string } };
const u: User = {};
const name = u.profile?.name ?? 'Anonymous';
console.log(name);

آلية عمل النمط

أولًا، يقيّم ?. سلسلة الوصول، فينتج القيمة أو undefined. ثم يفحص ?? تلك النتيجة؛ فإذا كانت فارغة، تُستخدم القيمة الافتراضية. معاملان وتعبير واحد واضح.

type Cfg = { server?: { port?: number } };
const cfg: Cfg = { server: {} };
const port = cfg.server?.port ?? 8080;
console.log(port);

نوع النتيجة

ينتج عن السلسلة النوع T | undefined؛ ويزيل ?? القيمة undefined ويضم نوع القيمة الافتراضية. ومع قيمة افتراضية من النوع المتوافق، يصبح النوع النهائي T فقط، من دون undefined يحتاج إلى معالجة.

type Cfg = { timeout?: number };
const cfg: Cfg = {};
const timeout: number = cfg.timeout ?? 30;
console.log(timeout + 5); // number, safe arithmetic

الحفاظ على القيم الصحيحة الزائفة

بما أن ?? لا يُفعّل إلا عند القيم الفارغة، فإنه يحافظ على القيمة 0 الصحيحة التي يتم الوصول إليها عبر السلسلة. وتُطبّق القيمة الافتراضية فقط عندما تكون الخاصية مفقودة فعلًا.

type Audio = { settings?: { volume?: number } };
const a: Audio = { settings: { volume: 0 } };
console.log(a.settings?.volume ?? 50); // 0, not 50

الوصول إلى إعدادات متداخلة بعمق

عند التعامل مع إعدادات متداخلة بعمق، اربط عدة خطوات من ?. وأنهِها بعامل ?? واحد. فإذا كانت أي وصلة مفقودة، ينتقل التعبير بسلاسة إلى القيمة الافتراضية.

type Cfg = { db?: { pool?: { max?: number } } };
const cfg: Cfg = { db: {} };
const maxPool = cfg.db?.pool?.max ?? 10;
console.log(maxPool);

القيم الافتراضية لاستجابات API

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

type Res = { data?: { items?: string[] } };
const res: Res = { data: {} };
const items = res.data?.items ?? [];
console.log('Item count:', items.length);

الدمج مع نتائج الأساليب

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

type Store = { find?: () => string | undefined };
const store: Store = { find: () => undefined };
const result = store.find?.() ?? 'default';
console.log(result);

تجنب الحواجز المطولة

قبل ظهور هذين المعاملين، كنت ستكتب فحوصات متعددة الأسطر للقيم الفارغة. ويستبدل الأسلوب المدمج كتلة كاملة بتعبير واحد، مما يحسن قابلية القراءة من دون التضحية بالأمان.

type User = { name?: string };
const u: User = {};
// Old: let n; if (u && u.name) n = u.name; else n = 'Guest';
const n = u?.name ?? 'Guest';
console.log(n);

الرجوع إلى عملية بحث أخرى

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

type Prefs = { theme?: string };
const userPrefs: Prefs = {};
const sitePrefs: Prefs = { theme: 'light' };
const theme = userPrefs?.theme ?? sitePrefs?.theme ?? 'dark';
console.log(theme);

الدمج مع الوصول إلى العناصر

يعمل النمط أيضًا مع الوصول إلى عناصر المصفوفة: اقرأ عنصرًا عبر ?.[i]، ثم عيّن له قيمة افتراضية باستخدام ??.

type Data = { tags?: string[] };
const d: Data = { tags: [] };
const first = d.tags?.[0] ?? 'none';
console.log(first);

قارئ إعدادات واقعي

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

type Settings = { ui?: { lang?: string } };
function getLang(s: Settings): string {
  return s.ui?.lang ?? 'en';
}
console.log(getLang({ ui: { lang: 'tr' } }), getLang({}));

تحقق سريع

اختبر فهمك للجمع بين ?. و??.

مراجعة: الجمع بين ?. و??

تعلمت الأسلوب الاصطلاحي obj?.value ?? fallback:

ينتقل ?. بأمان عبر مستويات الوصول، وينتج القيمة أو undefined.
يوفر ?? قيمة افتراضية فقط عندما تكون النتيجة فارغة.
يسقط النوع النهائي undefined، وغالبًا ما يصبح T واضحًا.
تظل القيم الزائفة الصحيحة مثل 0 محفوظة.

بعد ذلك، الاستدعاءات الاختيارية والوصول الاختياري إلى العناصر.

type Cfg = { limit?: number };
const c: Cfg = {};
const limit = c?.limit ?? 100;
console.log(limit);

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

هل درس «دمج ?. و??» مجاني؟

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

ماذا ستتعلم في «دمج ?. و??»؟

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

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

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

كم من الوقت يستغرق درس «دمج ?. و??»؟

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

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

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

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

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