TSX (TypeScript XML — React)

TSX يجمع بين الأنواع الثابتة في TypeScript وصيغة JSX لمكونات React. وهو امتداد الملف القياسي لمكونات React المُنمّطة، مما يوفر فحص الأنواع في وقت الترجمة للخصائص والحالة ومعالجات الأحداث.

نوع MIME

text/tsx

النوع

نص

الضغط

بدون فقدان

المزايا

• + Type-safe React components with prop validation at compile time
• + Excellent IDE autocomplete for props and event handlers
• + Catches common React bugs before runtime

العيوب

• − Requires TypeScript compiler configuration
• − Generic component syntax can conflict with JSX angle brackets
• − More boilerplate than plain JSX for simple components

متى تستخدم .TSX

استخدم TSX لجميع مكونات React في مشاريع TypeScript — فهو يوفر أمان الأنواع للخصائص والحالة والسياق والخطافات.

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

تُعالج ملفات TSX بواسطة مترجم TypeScript الذي يفحص أنواع الكود ويحوّل JSX إلى JavaScript. تستخدم المكونات العامة أقواساً زاوية يميزها المترجم عن عناصر JSX.

التاريخ

ظهر TSX بشكل طبيعي من الجمع بين TypeScript وJSX مع اكتساب React وTypeScript شعبية معاً. بحلول 2020 أصبح TSX الافتراضي لمشاريع React الجديدة التي تستخدم TypeScript.

التحويل من .TSX

.tsx → .css .tsx → .html .tsx → .js .tsx → .json .tsx → .jsx .tsx → .ts

التحويل إلى .TSX

.css → .tsx .html → .tsx .js → .tsx .json → .tsx .jsx → .tsx .ts → .tsx

صيغ ذات صلة

.c .cpp .css .csv .go .java .js .json .jsx .less