ما هو TypeScript ولماذا يجب عليك استخدامه؟

مقدمة

تتميز لغة البرمجة TypeScript بمزايا عديدة تتفوق بها على JavaScript للمطورين. فهي توفر إمكانيات إضافية تُمكّنك من بناء تطبيقات ومواقع ويب تفاعلية أكثر تعقيدًا مع أخطاء أقل.

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

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

ما هو TypeScript؟

TypeScript هي لغة برمجة تضيف وظائف إضافية إلى JavaScript.

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

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

تايب سكريبت هي لغة كتابة ثابتة، وهي فرع من جافا سكريبت، تعتمد على بنية جافا سكريبت ووظائفها الحالية. هذا يعني أنه يمكنك استخدام جافا سكريبت في شيفرة تايب سكريبت، ولكن لا يمكنك استخدامها لأن الشيفرة المكتوبة بها تستخدم ميزات وبنية غير متوفرة في جافا سكريبت.

يجب ترجمة TypeScript إلى JavaScript ليعمل في متصفحات الويب وبيئات مثل Node.js (يُطلق عليه أيضًا اسم transpired لأنه لا يُترجم إلى لغة منخفضة المستوى). عند ترجمة شيفرة TypeScript إلى JavaScript، لا يُقصد تحرير شيفرة JavaScript الناتجة مباشرةً.

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

امتداد ملف TypeScript هو .ts. فيما يلي مثال لملف index.ts يحتوي على بعض أكواد TypeScript الأساسية:

let message: string = "Hello, World!";
function greeting () {
console.log(message);
}
greeting();

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

أهم ميزات وفوائد TypeScript للمطورين

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

تعمل فحوصات سلامة النوع ووقت التجميع على تقليل أخطاء البرمجة

لنفترض هذا السيناريو: تأخذ قيمًا من مُدخلَي نص HTML وتريد إضافتهما. يقرأ جافا سكريبت هذه القيم كسلاسل نصية (إنه مربع نص!). النتيجة هي:

let a = "2"; // Assuming the value has been read from a text input
let b = "5";
console.log(a + b); // Result is "25"

يعمل هذا الكود دون أي تحذيرات أو أخطاء، ويتم التعامل مع القيم في مربعات النص كسلاسل، مما يعني أنه بدلاً من إضافتها باستخدام العمليات الحسابية، يتم ربطها، مما يؤدي إلى النتيجة غير المرغوب فيها "25" بدلاً من 7. إذا كنت تقوم ببناء أداة عمل وتريد إضافة بعض القيمة النقدية معًا، فقد يكون هذا سيئًا حقًا - فأنت تفرض رسومًا زائدة على عميلك!

يوضح هذا أهمية سلامة النوع. فيما يلي، يُطبّق نوع المتغيرات المضافة بإضافة نوع إليها:

let a: number = "2";
let b: number = "2";
console.log(a + b);

إذا حاولت تجميع هذا الكود وتشغيله، فلن يعمل - بدلاً من ذلك ستحصل على خطأ:

لا يمكن تعيين النوع 'string' إلى النوع 'number'.

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

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

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

تحافظ الأنواع والفئات والواجهات المخصصة على اتساق بياناتك.

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

يتيح لك إنشاء أنواع الكائنات والواجهات الخاصة بك نمذجة بياناتك في TypeScript لضمان معالجة بياناتك وتخزينها بشكل صحيح.

تتيح لك الفئات والوراثة إنشاء كود نظيف ومبادئ DRY، مما يحافظ على قاعدة الكود الخاصة بك أكثر تنظيمًا من JavaScript التقليدي.

تجعل الأنواع الحرفية والتعدادات الكود الخاص بك أسهل للفهم

تجعل العناصر المتسلسلة الكود الخاص بك أكثر قابلية للقراءة وملاءمة من خلال تسمية القيم التي قد تكون غامضة بخلاف ذلك.

على سبيل المثال، لنفترض أنك تُخزّن حالة طلب في قاعدة بياناتك كقيمة رقمية لتوفير المساحة وتسريع البحث. بدلاً من "معلق" و"مدفوع" و"مشحون"، يمكنك تخزين هذه القيم بالأرقام 0 و1 و2 على التوالي.

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

enum OrderStatus {
pending,
paid,
shipped,
}

في القائمة أعلاه، قيمة "pending" هي 0 (تبدأ العناصر، مثل الفهارس الأخرى في البرمجة، بحساب موضع العناصر من الصفر)، وقيمة "paid" هي 1، وقيمة "sent" هي 2. عند استخدام عنصر enum، يتم الإشارة إلى قيمه بالاسم ويتم إرجاع قيمة الفهرس:

console.log(حالة الطلب.مدفوع)؛; //سيتم إخراج 1

تُعيّن الأنواع الحرفية والاتحادات قيمًا محددة للمتغيرات. على سبيل المثال، قد يكون لديك دالة تتوقع فقط استقبال القيمة "قط" أو "كلب":

function myFunction(pet: "cat" | "dog") {
console.log(pet);
}

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

كيفية تثبيت TypeScript واستخدام مُجمِّع TypeScript

يجب تجميع كود TypeScript إلى JavaScript حتى يمكن تشغيله في متصفحات الويب وNode.js، ولهذا تحتاج إلى تثبيت مُجمِّع TypeScript.

بإمكانك تثبيت TypeScript عالميًا باستخدام أمر npm التالي.

npm install -g typescript

بمجرد التثبيت، يمكنك تشغيل أمر التجميع tsc TypeScript من أي مكان في محطتك باستخدام npx:

مؤشر tsc.ts

يقوم الأمر أعلاه بتجميع ملف TypeScript index.ts وإخراج ملف JavaScript مُجمّع باسم index.js.

كيفية كتابة برنامج في TypeScript

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

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

هل يمكنني استخدام كود JavaScript الحالي الخاص بي؟

نعم! TypeScript متوافق مع JavaScript. يمكنك استيراد كود JavaScript القديم واستخدامه في مشاريع TypeScript، وتعديله مع مرور الوقت للاستفادة من وظائف TypeScript الجديدة.

إنهاء البناء باستخدام TypeScript للمتصفح

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

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

يمكن استخدام كلٍّ من React وAngular لبناء تطبيقات TypeScript على Ionic وElectron. يتيح لك Ionic بناء تطبيقات جوال لنظامي iOS وAndroid باستخدام TypeScript، بينما يتيح لك Electron تضمين تطبيقات الويب في تطبيقات سطح المكتب لأنظمة Windows وLinux وMacOS.

نشر واجهات TypeScript الخلفية على الخادم

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

يمكنك أيضًا استخدام TypeScript مع إطار عمل الويب Fastify أو استخدام إطار عمل خاص بـ TypeScript مثل Nest لإنشاء واجهات برمجة تطبيقات آمنة للنوع.

TypeScript و GraphQL

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

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