ما هو ملف TSX؟

TSX (TypeScript + JSX) هي صيغة ملف تجمع بين قوة نظام الأنواع الثابت في TypeScript وصياغة JSX لكتابة مكونات واجهة مستخدم React. يُجمِّع المترجم TypeScript ملفات .tsx فيتحقق من الأنواع في وقت الترجمة ثم يُحوِّلها إلى JavaScript عادي.

الفارق عن .jsx: ملفات TSX تتطلب TypeScript بدلاً من JavaScript، مما يُضيف تحققاً صارماً من أنواع الـ props والـ state وإرجاع المكونات. هذا يُقلل أخطاء وقت التشغيل ويُحسِّن التكامل مع محررات الكود عبر IntelliSense والإكمال التلقائي.

Next.js وRemix وVite جميعها تدعم TSX بشكل أصلي، وأصبح الخيار القياسي في مشاريع React الاحترافية.

كيفية فتح ملفات TSX

• VS Code (ويندوز، ماك، لينكس) — دعم TypeScript مدمج كامل مع IntelliSense
• WebStorm (ويندوز، ماك، لينكس) — IDE متكامل لـ React وTypeScript
• Neovim مع LSP — إعداد متقدم لمطوري الطرفية
• أي محرر نصوص — ملفات TSX نص عادي قابل للقراءة
• المتصفح — بعد التجميع إلى JS (لا يُشغَّل مباشرة)

المواصفات التقنية

الاستخدامات الشائعة

• مكونات React مع أنواع محددة: تعريف Props وState بدقة، مما يمنع الأخطاء قبل تشغيل الكود
• صفحات Next.js: مكونات الخادم والعميل، والـ layouts والـ pages في Next.js App Router
• مكتبات مكونات UI: مكتبات كـ shadcn/ui وHeadless UI تُكتب وتُوزَّع بـ TSX
• تطبيقات React Native: مكونات الواجهة للهواتف بـ TSX مع أنواع صارمة
• Design Systems: أنظمة التصميم تُبنى بـ TSX لضمان واجهات برمجية متسقة

TSX مقابل JSX

مثال مكوّن TSX

// Button.tsx - مكوّن زر آمن الأنواع
interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
  disabled?: boolean;
}

export function Button({ label, onClick, variant = 'primary', disabled = false }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`btn btn-${variant}`}
    >
      {label}
    </button>
  );
}

// الاستخدام - TypeScript يتحقق من الأنواع تلقائياً
<Button label="حفظ" onClick={() => save()} variant="primary" />