تصحيح أخطاء كود TypeScript: أدوات وتقنيات للمطور

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

تصحيح أخطاء كود TypeScript: تحويل الأخطاء إلى مهام

\n\n

هل سبق لك أن أمضيت ساعة في البحث عن خطأ تبين أنه مجرد خطأ مطبعي في اسم متغير؟ أو وجدت نفسك تعتقد أن console.log هو الأداة الوحيدة التي تستخدمها؟ مرحباً بك في النادي. التصحيح ليس مجرد "اصطياد أخطاء"، بل هو فن كامل لفهم كيفية عمل الكود الخاص بك في الواقع.

\n\n

يضيف TypeScript سحراً خاصاً لهذه القصة. من ناحية، يمنع التحقق الثابت من الأنواع (static typing) فئة كاملة من الأخطاء حتى في مرحلة التجميع. ومن ناحية أخرى، عندما يتم تجميع الكود إلى JavaScript، يصبح تصحيحه "أثناء التشغيل" أكثر صعوبة: أنت تكتب بلغة TS، ولكنك ترى في المتصفح كود JS مُجمّع. كيف لا تضيع في هذا المتاهة؟

\n\n

اليوم سأعرض لكم تقنيات حقيقية لتصحيح أخطاء كود TypeScript أستخدمها بنفسي. لا ماء - فقط أدوات عملية وأمثلة وحيل ستوفر عليك الأعصاب وساعات من وقت العمل.

\n\n

لماذا يختلف تصحيح أخطاء TypeScript عن تصحيح أخطاء JavaScript؟

\n\n

الميزة الرئيسية لـ TypeScript هي الترجمة (transpilation). أنت تكتب كوداً بأنواع (types) وأدوية (generics) وواجهات (interfaces)، بينما يتلقى المتصفح أو Node.js كود JavaScript نقي. هذا يعني أنه عند التصحيح، تنظر إلى كود مُجمّع قد يختلف كثيراً عن الأصل: قد يتم تغيير أسماء المتغيرات، ومسح الأدوية، واختفاء الواجهات تماماً.

\n\n

الحل - خرائط المصدر (Source Maps). وهي خرائط تطابق بين كود TS الأصلي وكود JS المُجمّع. بدونها، يتحول تصحيح أخطاء TypeScript إلى تخمين.

\n\n

إعداد خرائط المصدر: الخطوة الأولى نحو الشفافية

\n\n

لكي يفهم المتصفح أو المصحح (debugger) أي سطر من TS يقابل سطراً من JS، تحتاج إلى تفعيل إنشاء خرائط المصدر في ملف tsconfig.json:

\n\n

{\n  "compilerOptions": {\n    "sourceMap": true,\n    "outDir": "./dist",\n    "target": "ES2020",\n    "module": "commonjs"\n  },\n  "include": ["src/**/*"]\n}

\n\n

الآن، عند التجميع، سيظهر ملف .map بجانب كل ملف JS. سيقوم المتصفح (Chrome, Firefox) بتحميله تلقائياً، وستتمكن من وضع نقاط توقف (breakpoints) مباشرة في كود TypeScript.

\n\n

هام: في بيئة الإنتاج (production)، من الأفضل تعطيل خرائط المصدر أو استخدام نقاط نهاية (endpoints) مخفية، حتى لا يتم كشف الكود الأصلي للمستخدمين. قم بإعداد ذلك عبر متغيرات البيئة:

\n\n

// tsconfig.prod.json\n{\n  "extends": "./tsconfig.json",\n  "compilerOptions": {\n    "sourceMap": false\n  }\n}

\n\n

أدوات تصحيح أخطاء TypeScript: ترسانتك

\n\n

1. VS Code - المصحح المدمج

\n\n

Visual Studio Code هي، على الأرجح، أفضل بيئة لتصحيح أخطاء TypeScript. المصحح المدمج قادر على قراءة خرائط المصدر ووضع نقاط التوقف (breakpoints) مباشرة في ملفات .ts. إليك الحد الأدنى من إعدادات ملف launch.json:

\n\n

{\n  "version": "0.2.0",\n  "configurations": [\n    {\n      "type": "node",\n      "request": "launch",\n      "name": "تصحيح TS عبر ts-node",\n      "runtimeArgs": ["-r", "ts-node/register"],\n      "args": ["${workspaceFolder}/src/index.ts"],\n      "sourceMaps": true,\n      "cwd": "${workspaceFolder}",\n      "protocol": "inspector"\n    }\n  ]\n}

\n\n

الآن يمكنك الضغط على F5 والدخول فوراً إلى المصحح. ضع نقاطاً حمراء على يسار أرقام الأسطر - ستعمل حتى لو كنت تصحح كود TypeScript يحتوي على أدوية (generics) ومزينات (decorators).

\n\n

حيلة: استخدم debugger; مباشرة في الكود - فهذا يعادل وضع نقطة توقف (breakpoint) ولكنه لا يتطلب استخدام الماوس.

\n\n

2. Chrome DevTools - تصحيح أخطاء الواجهة الأمامية

\n\n

لمشاريع الواجهة الأمامية (frontend) على TypeScript (React, Angular, Vue)، فإن Chrome DevTools هو أداة لا غنى عنها. افتح علامة التبويب Sources، وابحث عن ملفك في مجلد webpack:// أو src - إذا تم إعداد خرائط المصدر بشكل صحيح، سترى كود TypeScript الأصلي.

\n\n

ميزات مفيدة: