إعادة هيكلة الكود القديم (Legacy) إلى TypeScript: من الألف إلى الياء

إعادة هيكلة الكود القديم (Legacy) إلى TypeScript: من الألف إلى الياء

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

1. التحضير والاستراتيجية: من أين نبدأ؟

قبل تغيير الكود، من الضروري إنشاء "شبكة أمان". القاعدة الأساسية لإعادة الهيكلة: لا تكسر ما يعمل. ابدأ بإعداد البيئة.

1.1. تهيئة TypeScript والوضع الصارم

قم بتثبيت TypeScript وإنشاء ملف الإعدادات tsconfig.json. في البداية، يمكنك تعطيل الفحوصات الصارمة لتجنب الغرق في الأخطاء، ولكن يجب تفعيلها تدريجيًا.

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "strict": true, // ابدأ بـ false، ثم فعّلها تدريجيًا    "noImplicitAny": true,    "strictNullChecks": true,    "outDir": "./dist",    "rootDir": "./src",    "allowJs": true, // السماح بخلط ملفات JS و TS    "checkJs": false // لا تفحص ملفات JS حاليًا  },  "include": ["src/**/*"]}

1.2. الأتمتة والاختبارات

أضف أداة التحليل (ESLint) وأداة التنسيق (Prettier). إذا لم تكن هناك اختبارات، فاكتب على الأقل اختبارات تكامل للأجزاء الحيوية. هذا هو تأمينك ضد الانتكاسات.

• ESLint مع إضافة TypeScript سيكتشف الأخطاء المنطقية.
• Jest أو Vitest لاختبارات الوحدات.
• قم بإعداد خطافات ما قبل الالتزام (Husky) لفحص الكود قبل الالتزام.

2. الترحيل التدريجي: من JS إلى TS

لا تحاول إعادة كتابة كل شيء دفعة واحدة. استخدم نهجًا تكراريًا. أفضل أداة هنا هي allowJs: true في tsconfig. هذا يسمح بتضمين ملفات JavaScript من TypeScript.

2.1. إعادة تسمية الملفات وإضافة الأنواع الأساسية

ابدأ بإعادة تسمية أبسط الملفات مثل utils.js أو helpers.js إلى .ts. سيبدأ المحول البرمجي في الشكوى من الأنواع الضمنية any. مهمتك هي وصف توقيعات الدوال.

قبل (JavaScript):

function calculateDiscount(price, percent) {  return price - (price * percent / 100);}

بعد (TypeScript):

function calculateDiscount(price: number, percent: number): number {  return price - (price * percent / 100);}

2.2. التعامل مع "any" و "unknown"

في الكود القديم، هناك الكثير من الأنواع الضمنية any. لا تحاول كتابة كل شيء بشكل مثالي على الفور. استخدم any كحل مؤقت، ولكن ضع علامة TODO عليه. بالنسبة للبيانات من مصادر خارجية (API, localStorage)، من الأفضل استخدام unknown مع التحقق من النوع لاحقًا.

// حل مؤقتfunction processData(data: any) {  // TODO: إضافة النوع الصحيح  console.log(data.name);}

// النهج الصحيح للبيانات الخارجيةfunction processUserData(data: unknown) {  if (typeof data === 'object' && data !== null && 'id' in data) {    const user = data as { id: number; name: string };    console.log(user.name);  }}

3. إعادة هيكلة الإنشاءات المعقدة

عندما تكون الأنواع الأساسية جاهزة، انتقل إلى تحسين البنية. غالبًا ما يعاني الكود القديم من "الكائنات الإلهية" وسلاسل الاستدعاءات المعقدة.

3.1. استخراج الواجهات (Interfaces) والأنواع (Types)

بدلاً من تمرير كائنات بهيكل غير معروف، قم بإنشاء واجهات. هذا يجعل الكود موثقًا ذاتيًا.

// سيءfunction saveUser(user: any) {  // غير واضح ما هي الحقول الموجودة في user}

// جيد