متى تستخدم JSX.Element و ReactNode و ReactElement في TypeScript مع React؟

مرحباً! لقد بدأت في تعلم TypeScript مع React وأواجه دائماً ارتباكاً في الأنواع المستخدمة لوصف ما يمكن إرجاعه من المكون أو تمريره كـ children. كثيراً ما أجد على الإنترنت ثلاثة أنواع: `JSX.Element` و `ReactNode` و `ReactElement`. لكن متى يستخدم أي منها – يظل لغزاً بالنسبة لي. على سبيل المثال، أكتب مكوناً غلافاً: ```typescript interface WrapperProps { children: ??? // ماذا أكتب هنا؟ } ``` أو عندما أريد تحديد نوع القيمة المعادة لدالة المكون بشكل صريح: ```typescript const MyComponent = (): ??? => { return ; }; ``` لقد جربت استخدام `ReactNode`، لكن TypeScript يشتكى عندما أحاول تمرير شيء مثل مصفوفة من المكونات. ثم جربت `JSX.Element` – يبدو أنه يعمل، لكنني لست متأكداً من أنه صحيح. أما بالنسبة لـ `ReactElement` فأنا لا أفهم أصلاً لماذا هو مطلوب. أرجوك اشرح لي بطريقة مبسطة: ما الفرق بين هذه الأنواع الثلاثة وفي أي الحالات يجب استخدام أي منها؟ سأكون ممتناً جداً لمساعدتك!