كيفية استخدام مترجم TypeScript عبر الإنترنت
- اكتب شيفرة TypeScript أو الصقها في المحرر، أو ابدأ من المثال (ويستعيده الزر إعادة ضبط المثال).
- اضغط تشغيل أو استخدم Ctrl + Enter (⌘ + Enter على جهاز Mac).
- تُترجَم شيفرتك إلى JavaScript. وإذا وجد المترجم خطأ في الصياغة فإنه يُدرجه مع رمز الخطأ
TSوالسطر والعمود، ولا يُنفَّذ شيء. - إذا نجحت الترجمة، تُنفَّذ شيفرة JavaScript. يظهر ناتج
console.logفي لوحة المخرجات، ويمكنك فتح شيفرة JavaScript المُولَّدة أسفل المحرر لترى بالضبط ما أنتجه المترجم. - اختر الحدّ الزمني وهو 5 أو 15 أو 60 ثانية، أو اضغط إيقاف لإنهاء التشغيل مبكرًا.
في التشغيل الأول تنزّل الصفحة مترجم TypeScript الرسمي، وحجمه نحو 3 MB. يخزّنه متصفحك مؤقتًا، فتبدأ التشغيلات اللاحقة بسرعة.
تجري الترجمة والتنفيذ كلاهما في Web Worker داخل متصفحك. لا تُرفع شيفرتك ولا تُخزَّن على خوادمنا. ويحفظ المحرر آخر شيفرة لك في التخزين المحلي لمتصفحك، ولا يحفظها في أي مكان آخر.
ما المدعوم
تستخدم هذه الصفحة TypeScript 5.6، وهو المترجم الرسمي من Microsoft. يستهدف ES2022 ويشغّل الناتج على محرك JavaScript في متصفحك.
- كل صياغة TypeScript: التعليقات التوضيحية للأنواع، والواجهات (interfaces)، وأسماء الأنواع المستعارة (type aliases)، والأنواع العامة (generics)، وأنواع الاتحاد والتقاطع، والتعدادات (enums)، ومحدِّدات الوصول، و
satisfiesوas constوغيرها. - ناتج JavaScript حديث تبقى فيه الأصناف وasync/await والسلسلة الاختيارية (optional chaining) كما هي.
awaitفي المستوى الأعلى والمؤقِّتات والوعود (promises)، تمامًا مثل مترجم JavaScript عبر الإنترنت.
القيود:
- ترجمة فقط (Transpile-only). يزيل المترجم الأنواع ويبلّغ عن أخطاء الصياغة، لكنه لا يجري فحصًا كاملًا للأنواع. شيفرة مثل
const n: number = "text"تُترجَم وتُنفَّذ. استخدمtsc --noEmitأو محررك عندما تحتاج إلى أخطاء الأنواع الدلالية. - لا DOM: تعمل الشيفرة في worker، لذا فإن
documentوwindowغير متاحين. - لا استيراد: لا يمكن استخدام حزم npm ولا عبارات
importولا واجهات Node.js البرمجية.
مرجع سريع لـ TypeScript
type Shape =
| { kind: "circle"; r: number }
| { kind: "rect"; w: number; h: number };
function area(s: Shape): number {
switch (s.kind) {
case "circle": return Math.PI * s.r ** 2;
case "rect": return s.w * s.h;
}
}
function first<T>(items: T[]): T | undefined {
return items[0];
}
const shapes: Shape[] = [{ kind: "circle", r: 1 }, { kind: "rect", w: 2, h: 3 }];
console.log(shapes.map(area)); // [3.141592653589793, 6]
console.log(first(shapes)?.kind);| المفهوم | الصياغة |
|---|---|
| متغير محدد النوع | let count: number = 0; |
| واجهة (Interface) | interface User { id: number; name?: string } |
| نوع اتحاد (Union) | type Id = string | number; |
| دالة عامة (Generic) | function wrap<T>(v: T): T[] { return [v]; } |
| مصفوفة للقراءة فقط | const xs: readonly number[] = [1, 2]; |
| تعداد (Enum) | enum Dir { Up, Down } |
نصائح
- افتح شيفرة JavaScript المُولَّدة لتتعلم كيف تُترجَم ميزات مثل التعدادات وخصائص المعاملات (parameter properties) وحقول الأصناف. وهي طريقة سريعة لفهم ما تفعله TypeScript وقت التشغيل.
- تذكّر أن الأنواع تختفي وقت التشغيل. وللتحقق من البيانات القادمة من الخارج (مثل JSON المحلَّلة) اكتب فحوصًا وقت التشغيل أو حرّاس أنواع (type guards) مثل
function isUser(x: unknown): x is User. - هل تحتاج إلى ترتيب الناتج قبل نسخه إلى مشروعك؟ الصقه في منسّق JavaScript وأداة ضغطه.
TS1005: ';' expected يعني أنه تعذّر تحليل الشيفرة. أصلح السطر والعمود المعروضين في المخرجات، ثم شغّل مجددًا.الأسئلة الشائعة
هل يفحص هذا المترجم أنواعي؟
لا. فهو يستخدم وضع الترجمة فقط في المترجم، الذي يبلّغ عن أخطاء الصياغة وحدها. وهذا يبقيه سريعًا وخفيفًا، لكن عدم تطابق الأنواع لا يُبلَّغ عنه. وللفحص الكامل شغّل tsc محليًا أو استخدم محررًا مزوّدًا بخدمة لغة TypeScript.
ما الفرق بين TypeScript وJavaScript؟
TypeScript هي JavaScript مع أنواع ثابتة اختيارية. ولا تستطيع المتصفحات تشغيل TypeScript مباشرة، لذا تُترجَم أولًا إلى JavaScript عادية بإزالة الأنواع وتبسيط بضع ميزات خاصة بـ TypeScript، مثل التعدادات. ويمكنك رؤية نتيجة هذه الخطوة في هذه الصفحة.
ما إصدار TypeScript المستخدم؟
TypeScript 5.6، مع ES2022 هدفًا للإخراج.
هل يمكنني استيراد مكتبات؟
لا. فكل تشغيل يترجم ملفًا واحدًا وينفّذه دون تحليل للوحدات، لذلك لا تُدعم عبارات import ولا حزم npm. تصفّح كل أدوات المطوّرين لدينا لمعرفة الأدوات ذات الصلة.
آخر تحديث