ما هو منفّذ TypeScript؟

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

وصف الأداة

تشغّل هذه الأداة شيفرة TypeScript في متصفحك وتعرض كل ما تكتبه الشيفرة في وحدة التحكم. اكتب الشيفرة أو الصقها على اليسار واضغط تشغيل، أو اضغط Ctrl+Enter (أو Cmd+Enter على أجهزة Mac). يظهر الناتج على اليمين، سطرًا واحدًا لكل استدعاء لـ console، مع تمييز التحذيرات والأخطاء بالألوان. لا يتم تشغيل أي شيء حتى تطلب ذلك، لذا يمكنك التعديل بحرية.

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

أمثلة

صِف البيانات باستخدام واجهة واعمل معها:

interface Product {
  name: string;
  price: number;
}

const cart: Product[] = [
  { name: "كتاب", price: 12 },
  { name: "قلم", price: 1.5 },
];

const total = cart.reduce((sum, item) => sum + item.price, 0);
console.log(`الإجمالي: ${total}`);
TypeScript

الناتج هو:

الإجمالي: 13.5

استخدم تعدادًا وفئةً مع خصائص المعاملات:

enum Level {
  Low = "منخفض",
  High = "مرتفع",
}

class Task {
  constructor(
    public title: string,
    private level: Level,
  ) {}

  describe() {
    return `${this.title} (${this.level})`;
  }
}

console.log(new Task("كتابة الاختبارات", Level.High).describe());
TypeScript

الناتج هو:

كتابة الاختبارات (مرتفع)

الميزات

  • تشغّل TypeScript باستخدام المُصرّف الرسمي، لذا فإن جميع صيغ TypeScript مدعومة
  • تدعم التعدادات ومساحات الأسماء والمزخرفات والأنواع العامة وخصائص المعاملات
  • تعرض أخطاء الصياغة مع رقم السطر والعمود، بالتنسيق نفسه المستخدم في tsc
  • تعرض ناتج console.log وinfo وdebug وwarn وerror، مع ألوان للتحذيرات والأخطاء
  • تنسّق الكائنات والمصفوفات والخرائط والمجموعات والفئات والتواريخ والأخطاء، وتتعامل مع المراجع الدائرية
  • تدعم console.group وcount وtime وassert وdir وclear
  • تشغّل الشيفرة غير المتزامنة، بما في ذلك await على المستوى الأعلى والمؤقتات والوعود
  • تُبلغ عن الأخطاء غير الملتقطة ورفض الوعود غير المعالج في الناتج
  • زر إيقاف ينهي الشيفرة فورًا، حتى إذا كانت عالقة في حلقة لا نهائية
  • خيار الاحتفاظ بالسجلات، وهو مفعّل افتراضيًا، يحافظ على ناتج عمليات التشغيل السابقة كي تتمكن من مقارنة النتائج
  • مرّر المؤشر فوق سطر في الناتج لرؤية تاريخ ووقت تسجيله
  • انسخ الناتج كاملًا، أو امسحه باستخدام زر مسح، أو نزّل شيفرتك كملف

آلية العمل

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

ثم تُرسل JavaScript إلى Web Worker جديد. داخل العامل، تُستبدل أساليب console، بحيث يتحول كل استدعاء إلى نص ويُرسل مرة أخرى إلى الصفحة. تُغلَّف شيفرتك داخل دالة غير متزامنة، وهذا ما يتيح استخدام await على المستوى الأعلى.

يعرض شريط الحالة أسفل الناتج كلمة «جارٍ التشغيل» أثناء تصريف شيفرتك أو تنفيذها أو انتظار مؤقت بدأته. يحافظ setInterval على استمرار التشغيل حتى تمسحه أو تضغط إيقاف. يبدأ كل تشغيل بعامل جديد، لذلك لا تبقى متغيرات من تشغيل سابق.

نصائح

  • لا يتم التحقق من الأنواع. مثل tsx وesbuild، تزيل الأداة الأنواع وتشغّل الشيفرة، لذا تعمل const count: number = "ثلاثة" دون خطأ
  • استخدم console.log بدلًا من تعبير نهائي: لا تتم طباعة قيمة السطر الأخير، لذا لا يعرض 1 + 2 بمفرده أي شيء
  • يمكنك الإبقاء على عبارات التصدير وعمليات الاستيراد الخاصة بالأنواع فقط في شيفرتك. لا يعمل استيراد حزمة، ويفشل مع خطأ «تعذّر العثور على الوحدة»
  • لا يملك العامل صفحة، لذا لا تتوفر كائنات DOM مثل document وwindow وغيرها. استخدم self للنطاق العام
  • يحتفظ الناتج بأحدث 1000 سطر، ويُقتطع السطر الواحد بعد 10000 حرف
  • شغّل الشيفرة التي تثق بها فقط، كما تفعل في وحدة تحكم المتصفح