1. ما هو tsx ولماذا تحتاجه؟

tsx هو مشغل حديث وعالي الأداء لـ TypeScript و ESM (وحدات ECMAScript)، يتيح لك تشغيل ملفات .ts و .tsx و .mts مباشرة دون الحاجة إلى تجميعها مسبقًا إلى JavaScript. مبني على esbuild (أداة التجميع فائقة السرعة بلغة Go)، يوفر tsx تشغيلًا فوريًا تقريبًا لكود TypeScript، مما يجعله الأداة المثالية للتطوير، النمذجة السريعة، كتابة السكربتات، والاختبار.

لماذا تحتاج tsx؟ تقليديًا، لتشغيل ملفات TypeScript كنت تحتاج إلى خطوتين: أولاً تجميع الكود باستخدام tsc (مترجم TypeScript)، ثم تشغيل JavaScript الناتج عبر Node.js. هذا يبطئ دورة التطوير. tsx يحل هذه المشكلة بدمج التجميع والتشغيل في خطوة واحدة. فهو يعالج تلقائيًا صياغة TypeScript، وحدات ESM، JSX، وحتى يدعم حل مسار node_modules. باختصار، tsx هو بديل لـ ts-node ولكنه أسرع بكثير وأكثر حداثة.

المزايا الرئيسية لـ tsx مقارنة بالبدائل: السرعة (يستخدم esbuild الأسرع من tsc بـ 10 إلى 100 مرة)، دعم ESM فوري (بدون الحاجة لضبط tsconfig.json للوحدات)، اكتشاف تلقائي لإعدادات TypeScript، ودعم مدمج لوضع --watch. tsx مثالي لـ: كتابة أدوات CLI بـ TypeScript، تشغيل الاختبارات (Jest, Vitest)، إنشاء سكربتات أتمتة، النمذجة السريعة، وتعلم TypeScript.

2. التثبيت

يتم توزيع tsx عبر npm (مدير حزم Node) ويمكن تثبيته بشكل عام أو محلي داخل المشروع. يُوصى بالتثبيت المحلي لعزل تبعيات المشروع.

التثبيت المحلي (مُوصى به):

npm install --save-dev tsx

أو باستخدام yarn:

yarn add --dev tsx

أو pnpm:

pnpm add --save-dev tsx

التثبيت العام (للوصول السريع من أي مكان):

npm install -g tsx

التحقق من التثبيت:

npx tsx --version

بعد التثبيت، يمكنك تشغيل ملفات TypeScript باستخدام الأمر npx tsx اسم_الملف.ts (للتثبيت المحلي) أو tsx اسم_الملف.ts (للتثبيت العام).

هام: tsx يتطلب Node.js الإصدار 18 أو أحدث. للعمل مع ESM، تأكد من وجود الحقل "type": "module" في ملف package.json الخاص بك أو استخدم الامتداد .mts للملفات.

3. البداية السريعة — مثال عملي بسيط

أنشئ ملفًا باسم hello.ts بالمحتوى التالي:

// hello.ts
const greet = (name: string): string => {
    return `مرحبًا، ${name}! أهلاً بك في عالم tsx!`;
};

const userName: string = "PythonLib";
console.log(greet(userName));

// استخدام ميزات JavaScript الحديثة
const numbers: number[] = [1, 2, 3, 4, 5];
const doubled = numbers.map((n) => n * 2);
console.log("الأعداد المضاعفة:", doubled);

// كود غير متزامن
const fetchData = async (): Promise => {
    const data = await Promise.resolve({ id: 1, name: "مثال" });
    console.log("البيانات غير المتزامنة:", data);
};

fetchData();

قم بتشغيل الملف باستخدام الأمر:

npx tsx hello.ts

المخرجات المتوقعة:

مرحبًا، PythonLib! أهلاً بك في عالم tsx!
الأعداد المضاعفة: [ 2, 4, 6, 8, 10 ]
البيانات غير المتزامنة: { id: 1, name: 'مثال' }

هذا المثال يوضح العمل الأساسي لـ tsx: فهو يقوم تلقائيًا بتجميع TypeScript إلى JavaScript، ويدعم