نظرة عامة على TypeScript

  • 5 دقائق

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

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

يعالج TypeScript قيود JavaScript، ويفعل ذلك بدون المساومة على اقتراح القيمة الأساسية لـ JavaScript: القدرة على تشغيل التعليمات البرمجية الخاصة بك في أي مكان وعلى كل نظام أساسي أو مستعرض أو مضيف.

ما هو TypeScript؟

TypeScript هي لغة مفتوحة المصدر تم تطويرها من قبل Microsoft. إنها مجموعة فائقة من JavaScript، ما يعني أنه يمكنك استخدام مهارات JavaScript التي طورتها بالفعل مع ميزات معينة لم تكن متوفرة لك من قبل.

اكتب تلميحات

الميزة الأساسية لـ TypeScript هي نظام الكتابة الخاص بها. في TypeScript، يمكنك تحديد نوع بيانات متغير أو معلمة باستخدام تلميح نوع. باستخدام تلميحات الكتابة، يمكنك وصف شكل العنصر، والذي يوفر توثيقًا أفضل ويسمح لـ TypeScript بالتحقق من أن التعليمات البرمجية الخاصة بك تعمل بشكل صحيح.

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

تعمل الأنواع أيضًا على تعزيز مزايا الذكاء والإنتاجية لأدوات التطوير، مثل التحسس الذكي، والتنقل المستند إلى الرموز، والانتقال إلى التعريف، والعثور على جميع المراجع، وإكمال العبارات، وإعادة بناء التعليمات البرمجية.

يمكن أن تكون أنواع الكتابة اختيارية في TypeScript، لأن استنتاج النوع يسمح لك بالحصول على الكثير من هذه الطاقة دون كتابة تعليمات برمجية إضافية. إذا كان بإمكان TypeScript تحديد نوع البيانات ضمنيا (على سبيل المثال، عند تعيين قيمة لمتغير باستخدام let age = 42)، فإنه يستنتج نوع البيانات تلقائيا.

جربه! التعرف على الأنواع

دعونا ننظر إلى مثال يوضح استخدام الأنواع.

  1. افتح TypeScript Playground. ستتعلم المزيد عن الملعب في وقت لاحق في هذه الوحدة.

  2. انسخ نموذج تعليمات JavaScript البرمجية التالي والصقه في جزء TypeScript (على اليسار):

    function addNumbers(x, y) {
  return x + y;
}

console.log(addNumbers(3, 6));

    لاحظ أن نفس التعليمات البرمجية تظهر في جزء .JS (إلى اليمين). يعرض هذا الجزء التعليمات البرمجية JavaScript التي سينشئها TypeScript بعد تحويلها برمجيا.

  3. حدد Run لتنفيذ التعليمات البرمجية ل JavaScript. بعد ذلك، حدد علامة التبويب "Logs" ولاحظ تسجيل القيمة 9 إلى وحدة التحكم. قامت JavaScript بتعيين number النوع إلى المعلمات x وأرجعت y الدالة رقما.

  4. استبدل 3 ب "three" (بما في ذلك علامات الاقتباس) في التعليمات البرمجية TypeScript، ثم قم بتشغيله. يقوم JavaScript الآن بتعيين string النوع إلى المعلمة x وإرجاع "three6"، وهو نوع سلسلة، إلى وحدة التحكم. ربما واجهت هذا الموقف من قبل، وكما تعلم، يمكن أن يتسبب في بعض النتائج غير المتوقعة.

    في جزء TypeScript، لاحظ الخطوط المتعرجة الحمراء ضمن أسماء المعلمات في الدالة addNumbers . تشير الأسطر إلى أن مدقق النوع قد حدد أخطاء. مرر مؤشر الماوس فوق إحدى المعلمات واقرأ وصف الخطأ. قام TypeScript ضمنيا بتعيين نوع من any، وهو النوع الأوسع لأنه يمكن أن يحتوي بشكل أساسي على أي شيء.

  5. تحديث التعليمات البرمجية TypeScript لتحديد نوع لكل معلمة. استبدل x ب x: number و y ب y: number.

    ستلاحظ أن الأخطاء قد اختفت الآن من المعلمات، ولكن ظهر خطأ جديد ضمن الوسيطة الأولى في استدعاء الدالة: "الوسيطة من النوع "سلسلة" غير قابلة للتعيين إلى معلمة من النوع "رقم".

  6. استبدل "three" برقم لتصحيح الخطأ. يمكنك تمرير قيمة حرفية أو متغير أو أي بيانات أخرى. يفهم TypeScript شكل العنصر الخاص بك، حتى يتمكن من إعلامك بتعارض النوع في وقت التطوير.

  7. راجع JavaScript ولاحظ عدم وجود تغييرات عليها. تمكن TypeScript من توفير التحقق من النوع أثناء التطوير، ولكن لم يكن له أي تأثير على التعليمات البرمجية ل JavaScript الناتجة لأنه لا يدعم الأنواع.

ميزات التعليمات البرمجية الأخرى لـ TypeScript

يحتوي TypeScript على المزيد من ميزات الترميز التي لن تجدها في JavaScript:

  • الواجهات
  • مساحة الاسم
  • الوراثة
  • فئات مجردة
  • معدّلات البيانات
  • اختياريات
  • وظيفة التحميل الزائد
  • الديكور
  • اكتب الأدوات
  • الكلمات الأساسية للقراءة فقط

ستتعرف على المزيد حول بعض هذه الميزات في الوحدات النمطية اللاحقة.

توافق TypeScript مع JavaScript

TypeScript هي مجموعة فائقة صارمة من ECMAScript 2015 (ECMAScript 6 أو ES6). تعني هذه العلاقة أن جميع التعليمات البرمجية ل JavaScript هي أيضا تعليمة TypeScript البرمجية، ويمكن لبرنامج TypeScript أن يستهلك JavaScript بسلاسة.

المتصفحات تفهم JavaScript فقط. لكي يعمل التطبيق الخاص بك، عندما تكتبه في TypeScript، فأنت بحاجة إلى تجميع التعليمات البرمجية الخاصة بك وتحويلها إلى JavaScript. يمكنك تحويل تعليمات TypeScript البرمجية إلى تعليمات JavaScript البرمجية باستخدام مترجم TypeScript أو مترجم متوافق مع TypeScript. JavaScript الناتج هو رمز نظيف وبسيط يتم تشغيله في أي مكان يتم تشغيل JavaScript فيه: في المستعرض أو على Node.js أو في تطبيقاتك.

Diagram of the relationship between JavaScript and TypeScript, where TypeScript can use JavaScript directly but must be compiled to become JavaScript.

هام

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

ترحيل من JavaScript إلى TypeScript

اعتماد TypeScript ليس خيارا ثنائيا، لذلك يمكنك ترحيل قاعدة التعليمات البرمجية الخاصة بك تدريجيا. يمكنك البدء بإضافة تعليق توضيحي إلى JavaScript الحالي باستخدام JSDoc، ثم تبديل بعض الملفات ليتم التحقق منها بواسطة TypeScript. يمكنك تجهيز قاعدة التعليمات البرمجية الخاصة بك بمرور الوقت ليتم تحويلها بالكامل.

لمزيد من المعلومات حول هذه العملية، راجع برامج TypeScript التعليمية: الترحيل من JavaScript.