टाइपस्क्रिप्ट के साथ रिएक्ट में हम घटक बनाने के लिए दो मुख्य तरीकों का उपयोग कर सकते हैं: कार्यात्मक और वर्ग घटक। दोनों दृष्टिकोण प्रॉप्स और स्टेट के साथ काम करने की अनुमति देते हैं, लेकिन थोड़े अलग प्रतिमानों का उपयोग करते हैं। टाइपस्क्रिप्ट स्थिर टाइपिंग प्रदान करके विकास सुरक्षा को और बढ़ाता है, जो हमें प्रॉप्स और स्थिति के आकार को सटीक रूप से परिभाषित करने की अनुमति देता है।

नीचे हम कोड की स्थिरता और पठनीयता सुनिश्चित करने के लिए प्रकारों को परिभाषित करने के लिए इंटरफेस का उपयोग करते हुए विभिन्न घटकों के उदाहरण देखेंगे।

एफ-1. प्रॉप्स और स्थिति के बिना कार्यात्मक घटक

इस मामले में, एक सरल कार्यात्मक घटक जो न तो प्रॉप्स और न ही स्टेट का उपयोग करता है, इस तरह दिखता है:

import React from 'react';

const FunctionalComponent: React.FC = () => {
  return 
Hello, DEV.to!
;
};

यह घटक केवल स्थिर पाठ प्रदर्शित करता है।

एफ-2. प्रॉप्स के साथ कार्यात्मक घटक

जब हम प्रॉप्स के माध्यम से डेटा पास करना चाहते हैं, तो हम उस डेटा के रूप को परिभाषित करने के लिए इंटरफेस का उपयोग करते हैं:

import React from 'react';

interface IMyProps {
  name: string;
}

const FunctionalComponentWithProps: React.FC = ({ name }) => {
  return 
Hello, {name}!
;
};

यहां IMyProps में वैयक्तिकृत अभिवादन प्रदर्शित करने के लिए उपयोग किया जाने वाला नाम शामिल है।

एफ-3. राज्य के साथ कार्यात्मक घटक

कार्यात्मक घटकों में राज्य का उपयोग करते समय, हम रिएक्ट के उपयोगस्टेट हुक का उपयोग करते हैं:

import React, { useState } from 'react';

const FunctionalComponentWithState: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

यह घटक काउंटरों को ट्रैक करने के लिए स्थानीय स्थिति का उपयोग करता है।

एफ-4. प्रॉप्स और स्थिति के साथ एक कार्यात्मक घटक

प्रॉप्स और स्टेट के संयोजन से हमारे पास लचीले घटक हो सकते हैं जो प्रॉप्स के माध्यम से डेटा प्राप्त करते हैं और आंतरिक रूप से स्टेट में हेरफेर करते हैं:

import React, { useState } from 'react';

interface IMyProps {
  initialCount: number;
}

const FunctionalComponentWithPropsAndState: React.FC = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

यह घटक एक प्रोप के रूप में इनिशियलकाउंट और डायनेमिक काउंटर ट्रैकिंग के लिए आंतरिक स्थिति का उपयोग करता है।

के-1. बिना प्रॉप्स और स्टेट के क्लास कंपोनेंट

रिएक्ट में प्रॉप्स और स्टेट के बिना एक क्लास कंपोनेंट इस तरह दिखता है:

import React from 'react';

class ClassComponent extends React.Component {
  render() {
    return 
Hello, DEV.to!
;
  }
}

यह एक साधारण वर्ग घटक है जो स्थिर पाठ प्रदर्शित करता है।

के-2. प्रॉप्स के साथ क्लास घटक

जब एक क्लास घटक को प्रॉप्स प्राप्त होता है, तो हम इंटरफ़ेस का उपयोग करके उन्हें परिभाषित करते हैं:

import React from 'react';

interface IMyProps {
  name: string;
}

class ClassComponentWithProps extends React.Component {
  render() {
    return 
Hello, {this.props.name}!
;
  }
}

कार्यात्मक घटक की तरह, यहां हम वैयक्तिकृत डेटा प्रदर्शित करने के लिए प्रॉप्स का उपयोग करते हैं।

के-3. राज्य के साथ वर्ग घटक

राज्य वाले वर्ग घटकों के लिए, हम कंस्ट्रक्टर के अंदर राज्य को परिभाषित करते हैं:

• कंस्ट्रक्टर में खाली कोष्ठक

यदि आप प्रॉप्स का उपयोग नहीं करते हैं, तो आप बस कंस्ट्रक्टर में कोष्ठक को खाली छोड़ सकते हैं:

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor() {
    super({});
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

• प्रॉप्स के प्रकार के रूप में स्पष्ट रूप से {} निर्दिष्ट करें

यदि आप प्रॉप्स के बारे में स्पष्ट होना चाहते हैं, तो आप {} को प्रकार के रूप में निर्दिष्ट कर सकते हैं:

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor(props: {}) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

-> दोनों ही मामलों में, टाइपस्क्रिप्ट और रिएक्ट सही ढंग से काम करेंगे। यदि आपका घटक प्रॉप्स का उपयोग नहीं करता है, तो आप बस कंस्ट्रक्टर में खाली कोष्ठक का उपयोग कर सकते हैं, लेकिन आरंभीकरण त्रुटियों से बचने के लिए सुपर कॉल में {} पास करना सुनिश्चित करें।

यह घटक काउंटर परिवर्तनों को ट्रैक करने के लिए राज्य का उपयोग करता है।

के-4. प्रॉप्स और स्टेट के साथ एक क्लास घटक

प्रॉप्स और स्टेट दोनों का उपयोग करने वाले क्लास घटकों के लिए, हम दोनों अवधारणाओं को जोड़ सकते हैं:

import React from 'react';

interface IMyProps {
  initialCount: number;
}

interface IMyState {
  count: number;
}

class ClassComponentWithPropsAndState extends React.Component {
  constructor(props: IMyProps) {
    super(props);
    this.state = {
      count: props.initialCount
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

यह घटक प्रॉप्स के माध्यम से एक प्रारंभिक काउंटर प्राप्त करता है, और आंतरिक रूप से स्थिति में हेरफेर करता है।

टाइपस्क्रिप्ट में इंटरफेस का उपयोग करने से बेहतर टाइपिंग और आसान कोड पठनीयता आती है, खासकर जब अधिक जटिल डेटा संरचनाओं के साथ काम करते हैं। इन बुनियादी उदाहरणों के साथ, आपके पास रिएक्ट और टाइपस्क्रिप्ट के साथ कार्यात्मक और वर्ग घटकों को लिखने के लिए एक आधार है।