TypeScript للمبتدئين: 7 أخطاء قاتلة وكيفية تجنبها

مقدمة: لماذا يعض TypeScript المبتدئين، أو كيف لا تفشل في مشروعك الأول

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

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

إذا كنت قد بدأت للتو في تعلم TypeScript أو واجهت بعض المشاكل بالفعل، فهذه المقالة ستوفر لك ساعات من التصحيح والأعصاب. هيا بنا!

الخطأ رقم 1: الاستخدام غير المنضبط لـ any (مصدر كل المشاكل)

ما يفعله المبتدئون

الخطأ الأكثر شيوعًا بين أولئك الذين يتعلمون TypeScript هو كتابة any في كل مكان. يبدو الأمر: "حسنًا، لم أحدد النوع، لكن الكود يعمل!"

// ❌ سيء: any يقتل كل فائدة TypeScript\nfunction processData(data: any) {\n    console.log(data.name.toUpperCase());\n    return data.price * 2;\n}\n\nconst result = processData({ name: "لابتوب", price: 500 });\n// كل شيء يعمل... حتى تمرر null\nprocessData(null); // خطأ في وقت التشغيل!

لماذا هذا خطأ

any هو الثقب الأسود في TypeScript. عندما تكتب any، فأنت تقول للمترجم: "ابتعد، سأتدبر الأمر بنفسي". فيبتعد. تفقد الإكمال التلقائي، والتحقق من الأنواع، والحماية من الأخطاء الغبية. يتحول TypeScript مرة أخرى إلى JavaScript بكل عيوبه.

كيفية الإصلاح

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

// ✅ جيد: أنواع محددة و unknown\nfunction processData(data: { name: string; price: number }) {\n    console.log(data.name.toUpperCase());\n    return data.price * 2;\n}\n\n// أو إذا كان النوع غير معروف حقًا:\nfunction safeProcess(data: unknown) {\n    if (typeof data === 'object' && data !== null && 'name' in data) {\n        // الآن TypeScript يعلم أن data هو كائن يحتوي على حقل name\n        console.log((data as { name: string }).name);\n    }\n}

نصيحة: قم بتفعيل قاعدة no-explicit-any في ESLint - ستمنعك من استخدام any بدون سبب وجيه.

الخطأ رقم 2: تجاهل الوضع الصارم (أو "لماذا كل شيء يعمل لدي، لكن ليس كما ينبغي")

ما يفعله المبتدئون

يقوم العديد من المطورين المبتدئين عند تعلم TypeScript بتعطيل الوضع الصارم في tsconfig.json أو لا يقومون بتفعيله على الإطلاق. بحجة "هذا يكفي، أخطاء ترجمة أقل".

// ❌ سيء: strict: false\n// tsconfig.json\n{\n    "compilerOptions": {\n        "strict": false, // خطأ!\n        "noImplicitAny": false,\n        "strictNullChecks": false\n    }\n}\n\n// الآن سيتم تجميع هذا الكود بدون أخطاء:\nfunction greet(name: string | null) {\n    console.log(name.toUpperCase()); // احتمالية null!\n}\ngreet(null); // خطأ وقت التشغيل: Cannot read properties of null

لماذا هذا خطأ

بدون الوضع الصارم، يفقد TypeScript نصف قوته. لن تحصل على تحذيرات بشأن null و undefined المحتملة، ولن تتحقق من أنواع الوسائط - وفي النهاية ستواجه أخطاء في بيئة الإنتاج.

كيفية الإصلاح

قم دائمًا بتفعيل strict: true. هذا ينشط جميع الفحوصات الصارمة مرة واحدة.

// ✅ جيد: strict: true\n{\n    "compilerOptions": {\n        "strict": true,\n        "target": "ES2020",\n        "module": "ESNext"\n    }\n}\n\n// الآن سيجبرك TypeScript على معالجة null:\nfunction g