TypeScript में JSX.Element, ReactNode और ReactElement का उपयोग कब करें?
सभी को नमस्कार! मैंने TypeScript के साथ React सीखना शुरू किया और कंपोनेंट्स और props के रिटर्न वैल्यू के टाइप्स में भ्रम का सामना किया।
यहाँ एक सरल कंपोनेंट है:
```typescript
interface Props {
children: ???; // यहाँ क्या लिखें?
icon: ???; // और यहाँ?
}
function Card({ children, icon }: Props) {
return (
{icon}
);
}
```
मैंने विभिन्न प्रोजेक्ट्स में तीन टाइप्स देखे हैं: `JSX.Element`, `ReactNode` और `ReactElement`। ये एक ही चीज़ के लिए उपयोग होते प्रतीत होते हैं, लेकिन पूरी तरह से नहीं।
उदाहरण के लिए, मैं जानता हूँ कि:
- `ReactNode` का उपयोग children के लिए किया जा सकता है
- `JSX.Element` फंक्शनल कंपोनेंट्स से रिटर्न होता है
- `ReactElement` एक बेस टाइप है
लेकिन जब मैं लिखता हूँ:
```typescript
function MyComponent(): JSX.Element {
return {children}
Hello
; // काम करता है
}
function MyComponent2(): React.ReactNode {
return Hello
; // यह भी काम करता है
}
```
अंतर क्या है? और prop के लिए सही टाइप कौन सा है?