تفاعل باستخدام TypeScript أو JavaScript: أيهما أفضل؟

ما هو TypeScript؟

يوفر TypeScript مفتوح المصدر مترجمًا يحول تعليمات TypeScript البرمجية إلى تعليمات JavaScript البرمجية. هذه اللغة مفتوحة المصدر ومتعددة المستعرضات. افترض أنه لا توجد عيوب منطقية تقريبًا في لغة js. في هذه الحالة ، يمكنك استخدام TypeScript عن طريق إعادة تسمية ملفات your.js scripts to.ts والبدء في تلقي كود TypeScript المناسب.

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

ما هو جافا سكريبت؟

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

هل React أفضل باستخدام JavaScript أو TypeScript؟

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

قد تؤدي التطورات التكنولوجية المستقبلية إلى تسريع إنتاج البرامج ، مما يؤدي إلى زيادة الطلب على المبرمجين. الرجاء استخدام أي لغة ؛ نتوقع التطوير في كل من المشاريع الصغيرة والكبيرة: اختر TypeScript للمشاريع الكبيرة مع فرق دولية أو JavaScript للمهام المباشرة مع فرق رائعة.

يستخدم JavaScript على نطاق واسع. يحللونها ويجدون أن اللغة غير مستقرة ولا يمكن التنبؤ بها. إذا لزم الأمر ، يمكن ترجمة أطر عمل JS إلى TypeScript. مطلوب العمالة لتحويل أنظمة JS الشائعة إلى TS.

يجب توثيق ملفات the.d.ts وتحتوي على كافة المنهجيات التي تم إرجاعها لكل مكتبة تم نقلها. يتطلب نقل jQuery مزيدًا من الجهد. ربما هذا ليس بهذه الصعوبة. TypeScript مدعوم من قبل IDEA و WebStorm و Expressive و Particle وغيرها.

رد فعل كود ونوع الملف في TypeScript مقابل JavaScript

عند الفحص الأول ، يبدو أنه لا يوجد فرق بين الكود من React TypeScript القياسي و JavaScript.

هذا متوقع تمامًا نظرًا لأن TypeScript هو مجموعة الأكواد وهو أصل JavaScript. هذا يعني أن أي برمجة تعتمد على JavaScript ستكون قادرة أيضًا على تنفيذ ملفات TypeScript. وبالمثل ، لا يمكن أن تكون جميع لغات SASS كود CSS شرعيًا ؛ تنص هذه الفكرة على أن جميع CSS مقبولة في كود SASS.

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

الفرق الرئيسي بين TypeScript وتطبيق JavaScript React هو اسم الملف السابق. على سبيل المثال ، TSX ، بينما الأخير هو js.

كيفية إنشاء مشروع React في تنضيد؟

يمكنك إنشاء مشروع TypeScript React جديد باستخدام مكتبة إنشاء التطبيق في بيئتك واستخدام هذا الأمر:

 npx create-react-app my-app --template typescript

أو،

 yarn create react-app my-app --template Typescript

إذا كان لديك مشروع JavaScript React موجود تريد تحويله إلى TypeScript ، فيمكنك تشغيل هذا الأمر.

 npm install — save typescript @types/node @types/react @types/react-dom @types/jest

أو،

 yarn add typescript @types/node @types/react @types/react-dom @types/jest

بعد تشغيل الأمر ، يمكنك إعادة تسمية جميع ملفات .js الخاصة بك إلى .tsx ، وإعادة تشغيل الخادم ، والمضي قدمًا.

1. علة الماسك

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

2. مساعد التحسس الذكي في IDE

تعد List Components و Parameter Info و Rapid Info و Entire Word من بعض الوظائف التي تقدمها IntelliSense ، وهي أداة لإكمال التعليمات البرمجية. بضربات قليلة على المفاتيح ، يمكنك إضافة استدعاءات إلى السمات والطرق ، والاحتفاظ بسجل للحجج التي تكتبها ، واكتشاف القليل عن البرنامج الذي تستخدمه بفضل هذه القدرات.

3. اكتب النظام

قد تتساءل عن كيفية كتابة متغيراتك أو كائناتك بدقة حتى تتمكن شفرة مشروع React TypeScript من تمكين Bug Catcher و IntelliSense. لتوفير معالجة TypeScript Type في مشروع Reactive TypeScript ، هناك ثلاثة أشياء يجب وضعها في الاعتبار.

1. قم بتعريف التفاعل بين الكائنات / المصفوفات والنوع الفرعي لمتغيرات النوع البدائي.

لجعل حقل في كائن اختياري ، يمكنك استخدام المشغل. سيمنع TypeScript من إزعاجك عندما يتحقق من التعليمات البرمجية الخاصة بك.

2. عند الضرورة ، حدد نوع المكون الوظيفي

3. يمكنك استخدام هذا مجانًا. تسمح تهيئة الخاصية بقيمة تسمح لـ TypeScript بتحديد الجودة لك على الفور.

5 أسباب لاستخدام TypeScript مع React

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

في هذا المنشور ، سنستعرض 5 حجج مقنعة لصالح استخدام TypeScript لتطبيقات React.

1. المكونات سهلة القراءة والفهم

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

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

2. دعم أفضل لـ JSX

فائدة أخرى من TypeScript + React تعمل على تحسين التحسس الذكي وتوليف التعليمات البرمجية لـ JSX. يجعل Bit من السهل توزيع المكونات المستقلة ووصفها وإعادة استخدامها عبر المشاريع. استخدمه لإنشاء تطبيقات قابلة للتطوير ، والحفاظ على تصميم متسق ، وتعزيز إعادة استخدام الكود ، والتعاون مع الآخرين ، وتسريع التسليم.

3. دعم TypeScript افتراضيًا في المكتبات المشتركة

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

4. التنفيذ التدريجي للمشاريع الحالية

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

5. مزايا التحسس الذكي والتحقق من النوع الثابت بشكل عام

أ. اختبار الأنواع الثابتة

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

ب. التحسس الذكي الأفضل

يمكنك الوثوق في أن IntelliSense يظل صحيحًا بنسبة 100٪ عند دمج التحقق من صحة البيانات الثابتة من TypeScript و IntelliSense.

ج. تعزيز إعادة بناء ديون

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

د. أقل أخطاء لم يتم تعريفها

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

ه. تحسين القراءة والصيانة

ستكون قاعدة الكود أكثر قابلية للفهم والحفاظ عليها بشكل ملحوظ باستخدام تعريفات النوع. يمكنك الالتزام بمبادئ التطوير الموجه للكائنات واستخدام هياكل مثل Interfaces لتنظيم الكود الخاص بك بطريقة تقلل من الاقتران.

F. حل مشكلات استخدام TypeScript.

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

ز. منحنى للتعلم

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

ولكن إذا كانت المجموعة من ذوي الخبرة بالفعل مع اللغات المكتوبة ديناميكيًا ، مثل Java أو C # Understanding Typescript ، فهذا ليس صعبًا للغاية.

ح. تعريفات النوع مفقودة من مكتبة جهة خارجية.

هذا ظرف غير معتاد بالنظر إلى الشعبية المتزايدة لـ TypeScript. ومع ذلك ، فإن وثائق TypeScript الرسمية تقدم نصائح مفيدة إذا مررت عبر مكتبة تفتقد إلى التعريفات. استشهد بهذا.

أنا. فترة الحساب

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

تغليف

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