AzLearn

TypeScript و JavaScript

TypeScript vs JavaScript

مفهوم ~15 دقيقة

TypeScript و JavaScript — TypeScript vs JavaScript

TypeScript لا تلغي JavaScript. هي تضيف layer فوقها. عندما تكتب ملفاً .ts، يقوم TypeScript compiler بفحص الأنواع ثم ينتج JavaScript يمكن تشغيله في المتصفح أو Node. لذلك كل ما تعرفه عن runtime في JavaScript ما زال مهماً: undefined ما زالت موجودة، وJSON.parse ما زالت ترجع قيمة غير مضمونة، وasync ما زال يعمل كما هو.

القيمة الكبرى هي مرحلة ما قبل التشغيل. TypeScript تسألك: هل هذه الدالة تقبل string أم number؟ هل هذا الكائن يحتوي email؟ هل تعاملت مع حالة الخطأ؟ هذه الأسئلة تجعل التصميم أوضح. لكنها لا تحميك من كل شيء. إذا كذبت على compiler باستخدام as any أو افترضت شكل API بدون تحقق، فقد تعود أخطاء runtime.

فكر في TypeScript مثل اتفاق واضح بين أجزاء الكود. الواجهة تقول: “سأعطيك User فيه id وname”. الدالة تقول: “أحتاج User وسأرجع greeting”. عندما تغير شكل User، يخبرك TypeScript بكل الأماكن المتأثرة.

مثال العلاقة

index.ts

عند التحويل إلى JavaScript، يختفي type User. لكنه خدمك قبل التشغيل لأنه منع تمرير شكل خاطئ.

البديل: JSDoc في JavaScript

إذا كنت لا تريد خطوة build، يمكنك إضافة أنواع لملفات JavaScript العادية باستخدام تعليقات JSDoc. بعض المحررات (كـ VS Code) تفهمها وتقدم تكميلاً وفحصاً:

/**
 * @param {string} name
 * @param {number} count
 * @returns {string}
 */
function describeCourse(name, count) {
  return `${name} has ${count} lessons`;
}

JSDoc مفيد للمشاريع الصغيرة أو المكتبات التي تريد توثيقاً بدون compiler. TypeScript نفسه يدعم // @ts-check في .js لتشغيل فحص أنواع جزئي. لكن للمشاريع الكبيرة، الأنواع الأصلية في .ts أوضح وأكثر تعبيراً.

القاعدة العملية

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

تحدي — Challenge