ما الفرق بين امتدادات .ts و .tsx في TypeScript لـ React؟

مرحباً بالجميع! لقد بدأت مؤخراً في تعلم TypeScript مع React وواجهت موقفاً غير مفهوم بالنسبة لي. عندما أقوم بإنشاء المكونات، أرى أنه في المشاريع يتم استخدام امتدادين مختلفين: `.ts` و `.tsx`. على سبيل المثال، لدي ملف `Button.ts` وملف `App.tsx`. كلاهما يحتوي على كود TypeScript، ولكن عندما أحاول كتابة JSX داخل ملف `.ts`، يشتكي محرر الكود، وعند إعادة التسمية إلى `.tsx` يعمل كل شيء بشكل جيد. هذا مثال على الكود الخاص بي الذي لا يعمل في `Button.ts`: ```typescript import React from 'react'; interface ButtonProps { label: string; onClick: () => void; } // خطأ: JSX غير مدعوم في ملفات .ts const Button: React.FC = ({ label, onClick }) => { return {label}; }; ``` وهذا الكود نفسه يعمل بشكل ممتاز إذا تم حفظ الملف باسم `Button.tsx`. كما لاحظت أن بعض زملائي يستخدمون `.ts` للأدوات البسيطة والأنواع، و `.tsx` فقط للمكونات التي تحتوي على ترميز. ولكن هل هناك قاعدة صارمة؟