जावास्क्रिप्ट एक कमजोर टाइप की प्रोग्रामिंग भाषा है। इस वजह से, यह बहुत उदार है, और विकास के दौरान प्रोग्रामिंग त्रुटियों पर किसी का ध्यान नहीं जाने की संभावना है। टाइपस्क्रिप्ट, एक जावास्क्रिप्ट टाइप-चेकिंग लाइब्रेरी, इस समस्या को मूल्यों पर प्रकार लागू करके हल करती है। यह लेख आपको सिखाएगा कि टाइपस्क्रिप्ट के साथ एक रिएक्ट प्रोजेक्ट कैसे बनाया जाए।

टाइपस्क्रिप्ट के साथ एक रिएक्ट प्रोजेक्ट बनाना

क्रिएट-रिएक्शन-ऐप कमांड आपको का उपयोग करके टाइपस्क्रिप्ट प्रोजेक्ट बनाने की अनुमति देता है --टेम्पलेट विकल्प।

प्रति एक नया रिएक्ट प्रोजेक्ट बनाएं टाइपस्क्रिप्ट के साथ, निम्न कमांड चलाएँ:

एनपीएक्स सृजन करना-रिएक्ट-ऐप ऐप-नाम--टेम्पलेट टाइपस्क्रिप्ट

यह कमांड स्क्रैच से एक नया रिएक्ट और टाइपस्क्रिप्ट प्रोजेक्ट बनाता है। आप मौजूदा रिएक्ट एप्लिकेशन में टाइपस्क्रिप्ट भी जोड़ सकते हैं।

ऐसा करने के लिए, उस प्रोजेक्ट पर नेविगेट करें जिसमें आप टाइपस्क्रिप्ट जोड़ना चाहते हैं और निम्न कोड चलाएँ:

npm इंस्टाल --सेव टाइपस्क्रिप्ट @ प्रकार/node @ प्रकार/react @ प्रकार/react-dom @ प्रकार/jest

फिर .js फ़ाइल एक्सटेंशन को .tsx के साथ उन फ़ाइलों के लिए स्वैप करें जिन्हें आप टाइपस्क्रिप्ट में कनवर्ट करना चाहते हैं। एक बार जब आप ऐसा कर लेते हैं, तो आपको "

instagram viewer
रिएक्ट एक यूएमडी ग्लोबल को संदर्भित करता है, लेकिन वर्तमान फाइल एक मॉड्यूल है।" गलती। आप इस तरह हर टाइपस्क्रिप्ट फ़ाइल में रिएक्ट आयात करके इसे हल कर सकते हैं:

आयात प्रतिक्रिया से "प्रतिक्रिया"

अधिक सरल समाधान के रूप में, एक tsconfig.json बनाएं और jsx को प्रतिक्रिया-jsx पर सेट करें।

{
"संकलक विकल्प": {
"जेएसएक्स": "प्रतिक्रिया-jsx",
"लक्ष्य": "es6",
"मापांक": "एसनेक्स्ट",
 },
}

आप से सभी कॉन्फ़िगरेशन सेटिंग्स पा सकते हैं टाइपस्क्रिप्ट डॉक्स.

टाइपस्क्रिप्ट में रिएक्ट फंक्शन कंपोनेंट बनाना

आप जावास्क्रिप्ट फ़ंक्शन के समान ही एक रिएक्ट फ़ंक्शन घटक को परिभाषित करते हैं।

नीचे ग्रीटिंग्स नामक फ़ंक्शन घटक का एक उदाहरण है।

निर्यात करनाचूकसमारोहअभिवादन() {
वापसी (
<डिव>नमस्ते दुनिया</div>
 )
}

यह घटक एक "हैलो वर्ल्ड" स्ट्रिंग देता है, और टाइपस्क्रिप्ट इसके रिटर्न प्रकार का अनुमान लगाता है। हालाँकि, आप इसके रिटर्न प्रकार को एनोटेट कर सकते हैं:

निर्यात करनाचूकसमारोहअभिवादन(): जेएसएक्स.तत्व{
वापसी (
<डिव>नमस्ते दुनिया</div>
 )
}

यदि ग्रीटिंग्स घटक एक ऐसा मान लौटाता है जो JSX.element नहीं है, तो टाइपस्क्रिप्ट एक त्रुटि देगा।

टाइपस्क्रिप्ट के साथ रिएक्ट प्रॉप्स का उपयोग करना

रिएक्ट आपको प्रॉप्स के माध्यम से पुन: प्रयोज्य घटक बनाने की अनुमति देता है। उदाहरण के लिए, ग्रीटिंग्स घटक एक नाम प्रोप प्राप्त कर सकता है जैसे कि वापसी मूल्य इसके आधार पर अनुकूलित किया जाता है।

प्रोप के रूप में नाम के साथ संपादित घटक नीचे दिया गया है। इनलाइन प्रकार की घोषणा पर ध्यान दें।

समारोहअभिवादन({नाम}: {नाम: स्ट्रिंग}) {
वापसी (
<डिव>नमस्ते {नाम}</div>
 )
}

यदि आप "जेन" नाम पास करते हैं, तो घटक "हैलो जेन" संदेश लौटाएगा।

फ़ंक्शन में टाइप डिक्लेरेशन लिखने के बजाय, आप इसे बाहरी रूप से इस तरह परिभाषित कर सकते हैं:

प्रकार ग्रीटिंग्सप्रॉप्स = {
 नाम: स्ट्रिंग;
};

फिर परिभाषित प्रकार को घटक को निम्नानुसार पास करें:

समारोहअभिवादन({नाम}: ग्रीटिंग्सप्रॉप्स) {
वापसी (
<डिव>नमस्ते {नाम}</div>
 )
}

यदि आप इस प्रकार का निर्यात कर रहे हैं और इसे विस्तारित करना चाहते हैं तो इंटरफ़ेस कीवर्ड का उपयोग करें:

निर्यात करना इंटरफेसग्रीटिंग्सप्रॉप्स{
 नाम: स्ट्रिंग;
};

ध्यान दें कि प्रकार और इंटरफ़ेस के बीच सिंटैक्स अंतर - इंटरफ़ेस में एक समान चिह्न नहीं है।

आप निम्न कोड का उपयोग करके एक इंटरफ़ेस का विस्तार कर सकते हैं:

आयात { ग्रीटिंग्सप्रॉप्स } से '।/अभिवादन'
इंटरफेसवेलकमप्रॉप्सफैलीग्रीटिंग्सप्रॉप्स{
 समय: "डोरी"
}

फिर आप किसी अन्य घटक में विस्तारित इंटरफ़ेस का उपयोग कर सकते हैं।

समारोहस्वागत({नाम, समय}: वेलकमप्रॉप्स) {
वापसी (
<डिव>
 अच्छा {समय}, {नाम}!
</div>
 )
}

उपयोग "?" वैकल्पिक प्रॉप्स को परिभाषित करने के लिए आपके प्रॉप्स इंटरफ़ेस के साथ प्रतीक। यहाँ एक वैकल्पिक नाम प्रोप के साथ एक इंटरफ़ेस का उदाहरण दिया गया है।

इंटरफेसग्रीटिंग्सप्रॉप्स{
 नाम?: स्ट्रिंग;
};

यदि आप एक नाम प्रोप पास नहीं करते हैं, तो टाइपस्क्रिप्ट कोई त्रुटि नहीं देगा।

टाइपस्क्रिप्ट के साथ रिएक्ट स्टेट का उपयोग करना

सादे जावास्क्रिप्ट में, आप परिभाषित करते हैं यूजस्टेट () हुक निम्नलिखित नुसार:

कॉन्स [ग्राहक नाम, सेट ग्राहक नाम] = यूज़स्टेट ("");

इस उदाहरण में, टाइपस्क्रिप्ट आसानी से पहले नाम के प्रकार को एक स्ट्रिंग के रूप में अनुमान लगा सकता है क्योंकि डिफ़ॉल्ट मान एक स्ट्रिंग है।

हालांकि, कभी-कभी आप राज्य को परिभाषित मूल्य पर प्रारंभ नहीं कर सकते हैं। इन मामलों में, आपको एक राज्य मान प्रकार देना होगा।

उपयोगस्टेट () हुक में प्रकारों को परिभाषित करने के कुछ उदाहरण यहां दिए गए हैं।

कास्ट [ग्राहक नाम, सेट ग्राहक नाम] = यूज़स्टेट<डोरी>("");
कॉन्स्ट [आयु, सेटएज] = यूज़स्टेट<संख्या>(0);
स्थिरांक [सदस्यता प्राप्त है, सेट आईससब्सक्राइब्ड] = यूज़स्टेट<बूलियन>(असत्य);

आप useState() हुक में एक इंटरफ़ेस का भी उपयोग कर सकते हैं। उदाहरण के लिए, आप नीचे दिखाए गए इंटरफ़ेस का उपयोग करने के लिए उपरोक्त उदाहरण को फिर से लिख सकते हैं।

इंटरफेसआईसी ग्राहक{
 ग्राहक का नाम: स्ट्रिंग;
 आयु: संख्या;
 सदस्यता ली गई है: बूलियन ;
}

इस तरह हुक में कस्टम इंटरफ़ेस का प्रयोग करें:

कास्ट [ग्राहक, सेट ग्राहक] = यूज़स्टेट<आईसी ग्राहक>({
 ग्राहक का नाम: "जेन",
 उम्र: 10,
 सदस्यता ली गई है: असत्य
 });

टाइपस्क्रिप्ट के साथ ईवेंट का उपयोग करना

ईवेंट आवश्यक हैं क्योंकि वे उपयोगकर्ताओं को वेबपेज के साथ इंटरैक्ट करने की अनुमति देते हैं। टाइपस्क्रिप्ट में, आप या तो ईवेंट टाइप कर सकते हैं या ईवेंट हैंडलर।

प्रदर्शित करने के लिए, ऑनक्लिक () और ऑनचेंज () घटनाओं का उपयोग करके निम्नलिखित लॉगिन घटक पर विचार करें।

आयात {यूजस्टेट} से 'प्रतिक्रिया';
निर्यात करनाचूकसमारोहलॉग इन करें() {
 कॉन्स्ट [ईमेल, सेटईमेल] = यूज़स्टेट ('');
स्थिरांक हैंडल चेंज = (घटना) => {
ईमेल सेट करें(प्रतिस्पर्धा।लक्ष्य।मूल्य);
 };


स्थिरांक हैंडलक्लिक = (घटना) => {
 कंसोल.लॉग('प्रस्तुत!');
 };
वापसी (
<डिव>
<इनपुट प्रकार ="ईमेल" मूल्य = {ईमेल} ऑन चेंज = {हैंडल चेंज} />
<बटन ऑनक्लिक = {() => हैंडलक्लिक}>प्रस्तुत करना</button>
</div>
 );
}

इस प्रकार आप सादे जावास्क्रिप्ट में घटनाओं को संभालेंगे। हालाँकि, टाइपस्क्रिप्ट आपसे ईवेंट हैंडलर फ़ंक्शंस में ईवेंट पैरामीटर प्रकार को परिभाषित करने की अपेक्षा करता है। सौभाग्य से, रिएक्ट कई प्रकार के ईवेंट प्रदान करता है।

उदाहरण के लिए, हैंडल चेंज () ईवेंट हैंडलर के लिए चेंजइवेंट प्रकार का उपयोग करें।

आयात {चेंजइवेंट, यूजस्टेट} से 'प्रतिक्रिया';
कॉन्स्ट हैंडल चेंज = (घटना: चेंजइवेंट<HTMLInputElement>) => {
ईमेल सेट करें(प्रतिस्पर्धा।लक्ष्य।मूल्य);
};

चेंजइवेंट प्रकार का उपयोग इनपुट, चयन और टेक्स्टरेरा तत्वों के मूल्यों को बदलने के लिए किया जाता है। यह एक सामान्य प्रकार है जिसका अर्थ है कि आपको उस DOM तत्व में पास होना चाहिए जिसका मान बदलता है। इस उदाहरण में, आपने इनपुट तत्व पारित किया है।

उपरोक्त उदाहरण दर्शाता है कि ईवेंट को कैसे टाइप किया जाए। नीचे दिया गया कोड दिखाता है कि आप इसके बजाय ईवेंट हैंडलर कैसे टाइप कर सकते हैं।

आयात {चेंजइवेंटहैंडलर, यूजस्टेट} से 'प्रतिक्रिया';
कॉन्स्ट हैंडल चेंज: चेंजइवेंटहैंडलर<HTMLInputElement> = (घटना) => {
ईमेल सेट करें(प्रतिस्पर्धा।लक्ष्य।मूल्य);
};

हैंडलक्लिक () ईवेंट के लिए, माउसइवेंट () का उपयोग करें।

आयात {यूजस्टेट, माउसइवेंट} से 'प्रतिक्रिया';
स्थिरांक हैंडलक्लिक = (घटना: माउसइवेंट) => {
 कंसोल.लॉग('प्रस्तुत!');
};

दोबारा, आप प्रकार को ईवेंट हैंडलर में ही संलग्न कर सकते हैं।

आयात {यूजस्टेट, माउसइवेंटहैंडलर} से 'प्रतिक्रिया';
स्थिरांक हैंडलक्लिक: माउसइवेंटहैंडलर = (ईवेंट) => {
 कंसोल.लॉग('प्रस्तुत!');
 };

अन्य प्रकार के ईवेंट के लिए, देखें रिएक्ट टाइपस्क्रिप्ट चीट शीट.

यदि आप बड़े रूप बना रहे हैं, तो यह बेहतर है फॉर्मिक जैसे फॉर्म लाइब्रेरी का उपयोग करें, क्योंकि यह टाइपस्क्रिप्ट के साथ बनाया गया है।

आपको टाइपस्क्रिप्ट का उपयोग क्यों करना चाहिए?

आप एक नए रिएक्ट प्रोजेक्ट को टाइपस्क्रिप्ट का उपयोग करने या किसी मौजूदा को बदलने का निर्देश दे सकते हैं। आप टाइपस्क्रिप्ट का उपयोग रिएक्ट फ़ंक्शन घटकों, स्थिति और प्रतिक्रिया घटनाओं के साथ भी कर सकते हैं।

रिएक्ट घटकों को टाइप करने से कभी-कभी अनावश्यक बॉयलरप्लेट कोड लिखने का मन कर सकता है। हालांकि, जितना अधिक आप इसका उपयोग करेंगे, उतना ही आप अपने कोड को परिनियोजित करने से पहले त्रुटियों को पकड़ने की इसकी क्षमता की सराहना करेंगे।