| وجه المقارنة | لغة JavaScript | لغة TypeScript |
|---|---|---|
| نوع التدقيق (Type Checking) | ديناميكي (Dynamic) ويظهر الخطأ غالباً وقت تشغيل الكود في المتصفح | ثابت (Static) ويتم اكتشاف الأخطاء أثناء الكتابة في محرر الأكواد |
| الدعم والملفات | تعمل مباشرة في المتصفح بدون الحاجة لعملية ترجمة | تحتاج إلى مرحلة تحويل (Compilation) إلى جافاسكريبت لكي تفهمها المتصفح |
| التطبيقات الكبرى | تصبح صعبة الصيانة وتنظيم الأكواد مع كبر حجم المشروع | ممتازة جداً للمشاريع الضخمة وتدعم الهيكلة والذكاء الاصطناعي للمحرر |
تُعد لغة TypeScript بمثابة الأساس البرمجي الذي تقوم عليه منصة Angular بشكل كامل بدءاً من الإصدارات المتقدمة وحتى النسخة 22.1 الحالية. لفهم كيفية بناء تطبيقات قوية وخالية من الأخطاء، يجب علينا أولاً التعرف على لغة TypeScript، وكيف طورتها شركة Microsoft لتلبي احتياجات مشاريع الويب الكبرى التي تعجز لغة JavaScript التقليدية عن إدارتها بمفردها بكفاءة.
لغة TypeScript هي عبارة عن طبقة فوق لغة JavaScript (تُعرف تقنياً بكونها Superset)، مما يعني أن كل كود JavaScript صحيح هو بالضرورة كود TypeScript صحيح، ولكن مع إضافة ميزات قوية جداً أهمها نظام الأنواع (Type System).
بدلاً من اكتشاف أن هناك متغيراً غير موجود أو خطأ في اسم دالة بعد تشغيل التطبيق وفتح المتصفح، يقوم محرر الأكواد (VS Code) بتنبيهك فوراً بالخطأ أثناء الكتابة.
بفضل تحديد الأنواع، يستطيع المحرر أن يقترح عليك الدوال والخصائص المتاحة لأي عنصر تلقائياً بدقة متناهية.
عندما يصبح مشروعك مكوناً من مئات الملفات والمكونات، تجعل TypeScript الأكواد واضحة ومقروءة وثابتة البنية.
لفهم القوة الحقيقية لـ TypeScript مقارنة بـ JavaScript العادية، دعنا نلاحظ الأمثلة التالية:
هنا نقوم بتحديد أن المدخلات يجب أن تكون من نوع أرقام (number)، والمخرج رقم أيضاً، مما يمنع تمرير نصوص بالخطأ:
| 1 | function calculateTotal(price: number, tax: number): number { |
| 2 | return price + tax; |
| 3 | } |
| 4 | |
| 5 | // استخدام صحيح للدالة |
| 6 | let total = calculateTotal(100, 15); // النتيجة 115 |
| 7 | |
| 8 | // خطأ برمجوي يكتشفه محرر الأكواد فوراً إذا حاولت إرسال نص: |
| 9 | // let errorExample = calculateTotal("100", 15); |
تثبيت نوع البيانات للمتغيرات يمنع تغيير نوعها بالخطأ لاحقاً في المشروع:
| 1 | let username: string = "أحمد"; |
| 2 | let isPublished: boolean = true; |
| 3 | let scores: number[] = [90, 85, 95]; |