شرح TypeScript: لماذا تحتاج إليها

أنت تكتب JavaScript كل يوم. وهي تعمل بشكل جيد. إذن لماذا تنتقل إلى TypeScript؟

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

TypeScript هي JavaScript مع إضافة الأنواع (types). أنشأتها Microsoft في عام 2012. وتستخدمها فرق كبيرة في Google و Slack.

TypeScript لا تحل محل JavaScript، بل يتم تحويلها (compile) إلى JavaScript عادية. المتصفحات و Node.js تقوم بتشغيل ملفات JS الناتجة. تساعدك TypeScript على كتابة كود أفضل قبل تشغيله.

قارن بين هذين المثالين:

JavaScript:

function greetUser(name) {
  return "Hello, " + name.toUpperCase();
}
greetUser(42); // سيؤدي هذا إلى تعطل تطبيقك أثناء التشغيل.

TypeScript:

function greetUser(name: string): string {
  return "Hello, " + name.toUpperCase();
}
greetUser(42); // سيظهر هذا خطأً في المحرر الخاص بك على الفور.

لماذا تستخدم TypeScript؟

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

كيف تبدأ:

  1. تثبيتها عبر npm: npm install -g typescript

  2. إنشاء ملف باسم hello.ts: const message: string = "Hello, TypeScript!"; console.log(message);

  3. تحويلها (compile): tsc hello.ts

يؤدي هذا إلى إنشاء ملف hello.js. تختفي الأنواع (types) في المخرجات، مما يترك JavaScript نظيفة ليقوم المتصفح بتشغيلها.

أخطاء شائعة يجب تجنبها:

  • استخدام "any" لكل شيء: هذا يلغي فوائد TypeScript. كن محددًا.
  • تجاهل الأخطاء: لا تخفِ الأخطاء باستخدام التعليقات. قم بإصلاح المشكلة الأساسية.
  • الإفراط في إضافة التوصيفات (annotations): TypeScript ذكية، وغالبًا ما يمكنها تخمين النوع من خلال الاستنتاج (inference).

تتطلب TypeScript منحنى تعلم بسيط، لكنها تؤتي ثمارها مع نمو مشاريعك.

المصدر: https://dev.to/ramesh_s_a8f0867d239e927c/typescript-explained-why-every-javascript-developer-should-care-4nn3