إعادة هيكلة الكود القديم إلى TypeScript: دليل خطوة بخطوة

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

إعادة هيكلة الكود القديم (Legacy) إلى TypeScript: دليل خطوة بخطوة

العمل مع الكود القديم (legacy) هو جزء لا مفر منه في حياة أي مطور، خاصة في المشاريع الكبيرة. غالبًا ما يكون هذا الكود مكتوبًا بلغة JavaScript بدون كتابة صارمة (strict typing)، ويعج بالسلاسل "السحرية"، والدوال غير الواضحة، وغياب النمطية (modularity). الانتقال إلى TypeScript ليس مجرد تغيير في بناء الجملة، بل هو فرصة لتحسين بنية المشروع وقابليته للقراءة والصيانة بشكل كبير. في هذه المقالة، سنقوم بتحليل استراتيجية مجربة لإعادة هيكلة الكود القديم إلى TypeScript، والتي تقلل المخاطر وتحقق أقصى فائدة.

لماذا يعتبر TypeScript مثاليًا لإعادة هيكلة الكود القديم؟

يوفر TypeScript إمكانيات فريدة لإعادة هيكلة آمنة:

الكتابة الثابتة (Static Typing): تسمح باكتشاف الأخطاء في مرحلة الترجمة (compilation) وليس في وقت التشغيل (runtime).
التوثيق التلقائي: تعمل الأنواع (types) كتوثيق حي يشرح البيانات التي تتوقعها الدالة.
تحسين التنقل والإكمال التلقائي: بيئة التطوير المتكاملة (IDE) مثل VS Code و WebStorm تفهم بنية الكود، مما يسرع التطوير.
إعادة هيكلة آمنة: إعادة تسمية المتغيرات أو تغيير توقيعات الدوال يتم بثقة بأن شيئًا لن يتعطل.
التطبيق التدريجي: يمكن إضافة TypeScript إلى المشروع ملفًا تلو الآخر، دون إعادة كتابة كل شيء دفعة واحدة.

الخطوة 1: التحضير وإعداد البيئة

قبل لمس الكود، من الضروري تحضير البنية التحتية. بدونها، ستتحول إعادة الهيكلة إلى فوضى.

تأكد من وجود اختبارات. هذه هي أهم قاعدة لإعادة الهيكلة. إذا لم تكن هناك اختبارات، فاكتب على الأقل اختبارات تكامل (integration tests) للوحدات الأساسية. بدون اختبارات، أنت تخاطر بتعطيل الوظائف العاملة.
قم بإعداد TypeScript. قم بتثبيت typescript وأنشئ ملف tsconfig.json.
فعّل الفحوصات الصارمة. في ملف tsconfig.json، أضف بالتأكيد "strict": true. هذا يتضمن strictNullChecks و noImplicitAny وخيارات مفيدة أخرى.

مثال على ملف tsconfig.json أدنى الحد الأدنى:

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "strict": true,    "esModuleInterop": true,    "skipLibCheck": true,    "outDir": "./dist"  },  "include": ["src/**/*"]}

قم بإعداد الـ Linter والـ Formatter. سيساعد ESLint مع إضافة TypeScript (@typescript-eslint) و Prettier في الحفاظ على نمط كود موحد.

الخطوة 2: الترحيل التدريجي من JavaScript إلى TypeScript

لا تحاول إعادة كتابة المشروع بأكمله في يوم واحد. استخدم استراتيجية "ملف تلو الآخر".

خوارزمية العمل:

أعد تسمية الملف legacyModule.js إلى legacyModule.ts.
أضف أنواعًا (types) للدوال المصدرة والمستوردة.
استخدم any بشكل مؤقت إذا لم تكن متأكدًا من النوع. ضع علامة على هذه الأماكن بتعليق // TODO: fix type.
قم بتشغيل الاختبارات وتحقق من أن كل شيء يعمل.

مثال: لنفترض أن لدينا دالة قديمة (legacy) بلغة JavaScript:

// oldModule.jsfunction calculateDiscount(price, customerType) {    if (customerType === 'vip') {        return price * 0.8;    }    return price * 0.95;}

بعد إعادة الهيكلة إلى TypeScript:

// oldModule.tstype CustomerType = 'regular' | 'vip';

function calculateDiscount(price: number, customerType: CustomerType): number {    if (customerType === 'vip') {        return price * 0.8;    }    return price * 0.95;}

النوع CustomerType يجعل الكود موثقًا ذاتيًا