إعادة هيكلة كود TypeScript: متى وكيف تحول الفوضى إلى نظام

مقدمة: عندما تبدأ رائحة الكود "بالعفن"

كل مطور يعرف هذا الشعور. تفتح ملفًا كتبته قبل ثلاثة أشهر، ويتجهم وجهك. في أعماقك، تسمع همسًا: "لم أكتب أنا هذا، لقد كتبه مبتدئ ما". لكن مرآة الرؤية الخلفية لا ترحم: لقد كنت أنت. الكود يعمل، والاختبارات تمر، لكن مع كل إضافة ميزة جديدة، تقضي وقتًا أطول. هل هذا مألوف؟

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

متى يجب إجراء إعادة هيكلة كود TypeScript؟

هناك خرافة تقول إن إعادة الهيكلة مهمة منفصلة في السباق. في الممارسة العملية، أفضل إعادة هيكلة هي عملية مستمرة. لكن هناك إشارات واضحة تصرخ: "توقف! هنا يحتاج إلى نظام!".

قاعدة الثلاثة (واثنان إضافيان)

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

أعراض الكود "القذر" في TypeScript

• فوضى any: إذا كان any في مشروعك يظهر أكثر من string - فهذه علامة حمراء. TypeScript يفقد معناه.
• دوال وحشية: دالة مكونة من 200+ سطر تفعل كل شيء: تتحقق، تحلل، ترسل طلبًا وترسم واجهة.
• أرقام ونصوص "سحرية": if (status === 3) - ما هو 3؟ لا أحد يعرف، باستثناء المؤلف الذي استقال بالفعل.
• انتهاك مبدأ DRY: واجهات متماثلة مبعثرة عبر 10 ملفات.
• اختبارات أفظع من الكود: إذا كان اختبار دالة واحدة يتطلب تشغيل خادم وقاعدة بيانات وتشغيل Docker - فقد انحرفت عن المسار.

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

المبادئ الأساسية: كيف لا تعطل الإنتاج

قبل البدء في إعادة الهيكلة، تذكر الأركان الثلاثة التي تقوم عليها إعادة الهيكلة الآمنة:

1. الاختبارات هي تأمينك. بدون تغطية اختبارية، إعادة الهيكلة هي لعبة روليت روسية. اكتب على الأقل اختبارات وحدة أساسية قبل البدء.
2. خطوات صغيرة. لا تحاول إعادة هيكلة المشروع بأكمله في ليلة واحدة. وحدة واحدة - commit واحد.
3. مُجمّع TypeScript هو صديقك. استخدم إعدادات صارمة في tsconfig.json: strict: true - هذا هو كاشف الأكاذيب الخاص بك.

تقنيات عملية لإعادة الهيكلة مع أمثلة على TypeScript

دعنا ننتقل إلى الجزء الأكثر إثارة - الكود. سننظر في ثلاث حالات واقعية ونوضح كيفية تحسينها.

1. التخلص من any: قوة الأدوية الجنسية

مثال سيء. الدالة تقبل أي شيء وتعيد أي شيء. هذا ليس TypeScript، بل JavaScript بقناع.

// سيء: any يقتل كتابة الأنواعfunction getFirstElement(arr: any[]): any {  if (arr.length === 0) {    throw new Error('Array is empty');  }  return arr[0];}

const num = getFirstElement([1, 2, 3]); // num: anyconsole.log(num.toUpperCase()); // خطأ في وقت التشغيل، لكن المُجمّع صامت

مثال جيد. نستخدم الأدوية الجنسية. يصبح الكود أكثر أمانًا، وتقترح IDE الأنواع.

// جيد: الأدوية الجنسية تنقذfunction getFirstElement<T>(arr: T[]): T {  if (arr.length === 0) {    throw new Error('Array is em