خطأ TypeScript string | undefined: كيفية إصلاحه دون أن تفقد صوابك

مقدمة: «Type 'string | undefined' is not assignable to type 'string'» — ألم مألوف؟

إذا كنت تكتب بلغة TypeScript لمدة أسبوع على الأقل، فمن المؤكد أنك رأيت هذه الرسالة. تظهر في أكثر اللحظات غير المتوقعة: أنت متأكد أن المتغير هو سلسلة نصية، ولكن المترجم يصر بعناد: «مهلاً، قد يكون هناك undefined!». هل هذا مألوف؟

هذا الخطأ هو أحد أكثر الأسئلة شيوعًا على Stack Overflow (آلاف المشاهدات، عشرات الإجابات). والمسألة ليست أن TypeScript «غبي». بل على العكس: إنه ينقذك من أخطاء وقت التشغيل التي قد تعطل التطبيق. ولكن كيف تشرح ذلك للمترجم؟ كيف تجعل الكود آمنًا وقابلاً للقراءة في نفس الوقت؟

في هذه المقالة، سنحلل:

\n
• لماذا يحدث خطأ Type 'string | undefined' is not assignable to type 'string'
\n
• 5 طرق عملية لإصلاحه (من البسيط إلى المتقدم)
\n
• المزالق النموذجية للمبتدئين
\n
• متى تستخدم ! (non-null assertion)، ومتى يكون ?? (nullish coalescing) أفضل
\n

هل أنت مستعد؟ هيا بنا!

1. لماذا يحدث هذا الخطأ في TypeScript؟

في JavaScript، يمكن أن يكون المتغير undefined في أي لحظة. TypeScript، خاصة مع تفعيل العلم strictNullChecks، يريد منك أن تحدد بوضوح: «أنا أعلم أنه قد يكون هناك قيمة فارغة هنا، وأنا أتعامل معها».

انظر إلى هذا المثال البسيط:

function getUsername(id: number): string {\n    const user = users.find(u => u.id === id);\n    return user.name; // خطأ! user قد يكون undefined\n}\n

الطريقة find() تُرجع User | undefined. إذا لم يتم العثور على المستخدم، فستُرجع undefined. TypeScript يرى هذا ويصرخ: «أنت تحاول تعيين string | undefined إلى string! لا يمكن!».

هذا ليس خطأ في TypeScript، بل هو ميزة. إنه يجبرك على التفكير: «ماذا لو لم يكن المستخدم موجودًا؟ ماذا سترجع الدالة؟ سلسلة نصية فارغة؟ ستلقي خطأ؟». وهذا صحيح.

2. 5 طرق لإصلاح الخطأ (من البسيط إلى المعقد)

2.1. عامل التأكيد على عدم القيمة الخالية (!)

أسرع طريقة (والأكثر خطورة) هي أن تقول لـ TypeScript: «اخرس، أنا أعرف ما أفعله».

function getUsername(id: number): string {\n    const user = users.find(u => u.id === id);\n    return user!.name; // ! — أنا متأكد أن user ليس undefined\n}\n

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

متى لا تستخدمه: في 90% من الحالات. هذا يشبه إيقاف تشغيل الوسادة الهوائية في السيارة - إنه يعمل، لكن المخاطرة هائلة.

2.2. التحقق عبر if (حارس النوع)

طريقة كلاسيكية وآمنة:

function getUsername(id: number): string {\n    const user = users.find(u => u.id === id);\n    if (user) {\n        return user.name; // TypeScript يعلم: داخل الكتلة user هو بالتأكيد User\n    }\n    return 'ضيف'; // قيمة احتياطية\n}\n

TypeScript ذكي: بعد التحقق if (user) فإنه «يضيق» النوع. داخل الكتلة، user هو User، وليس User | undefined.

2.3. عامل السلسلة الاختياري (?.) مع قيمة احتياطية

سطر واحد أنيق للعمل مع الكائنات المتداخلة:

function getUsername(id: number): string {\n    const user = users.find(u => u.id === id);\n    return user?.name ?? 'ضيف';\n}\n

دعنا نحلله بالتفصيل:

\n
• user?.name — إذا كان user هو undefined، فإنه يُرجع undefined دون التسبب في خطأ
\n
• ?? 'ضيف' — إذا كانت القيمة على اليسار undefined أو null، نستخدم 'ضيف'
\