एक टाइपस्क्रिप्ट रिएक्ट एप्लिकेशन में PropTypes

Question

React.PropTypesएक टाइपस्क्रिप्ट रिएक्ट एप्लिकेशन में समझ बनाने का उपयोग करता है या यह केवल "बेल्ट और सस्पेंडर्स" का मामला है?

चूंकि घटक वर्ग एक Propsप्रकार के पैरामीटर के साथ घोषित किया गया है :

interface Props {
    // ...
}
export class MyComponent extends React.Component<Props, any> { ... }

वहाँ जोड़ने के लिए कोई वास्तविक लाभ है

static propTypes {
    myProp: React.PropTypes.string
}

वर्ग परिभाषा के लिए?

Answer 1

टाइपस्क्रिप्ट प्रकार और React.PropTypesएक ही समय में अपने दोनों घटक प्रॉप को बनाए रखने के लिए आमतौर पर बहुत अधिक मूल्य नहीं है ।

यहां कुछ मामले हैं जहां ऐसा करना उपयोगी है:

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

इसलिए, आमतौर पर यह एक सवाल है कि आप अपने संकलन समय सत्यापन पर कितना भरोसा कर सकते हैं।

टाइपस्क्रिप्ट के नए संस्करण अब आपके React.PropTypes( PropTypes.InferProps) के आधार पर टाइप कर सकते हैं , लेकिन परिणामी प्रकार आपके कोड में कहीं और उपयोग या संदर्भित करना मुश्किल हो सकता है।

Comments

क्या आप पहले कथन की व्याख्या कर सकते हैं?

— 22 से 22

@vehsakul क्षमा करें, स्पष्टीकरण के लिए, यदि आप एक ऐसा पैकेज लिख रहे हैं जो उन डेवलपर्स द्वारा स्थापित किया जाएगा जो टाइपस्क्रिप्ट का उपयोग नहीं कर रहे हैं, तो उन्हें रन-टाइम पर त्रुटियों को प्राप्त करने के लिए PropTypes की आवश्यकता होती है। यदि आपका प्रोजेक्ट केवल स्वयं / अन्य टाइपस्क्रिप्ट प्रोजेक्ट्स के लिए है, तो आपके प्रॉम्प्स के लिए टाइपस्क्रिप्ट इंटरफ़ेस पर्याप्त हैं क्योंकि प्रोजेक्ट केवल निर्माण नहीं करेगा।

— जोएल डे

यह एक POC है जो वेबपैक के स्तर github.com/grncdr/ts-react-loader#what-it-does

— borN_free

मैं एक वन-टाइप चाहता हूं - वैकल्पिक उपयोग: PropTypes.oneOfType ([PropTypes.string, PropTypes.number, PropTypes.instanceOf (संदेश))] - टाइपस्क्रिप्ट में यूनियन प्रकार हैं, लेकिन वे मुझे एक ही चीज़ नहीं देते हैं

— Mz एक

मैंने एक पुस्तकालय प्रकाशित किया है जो ऐसा करता है: github.com/joelday/ts-proptypes-transformer यह एक टाइपस्क्रिप्ट संकलक परिवर्तन के रूप में लागू किया गया है और यह गहरी जेनरिक, यूनियनों, आदि के लिए सटीक प्रोपटीप्स का उत्पादन करता है, कुछ खुरदरे किनारे हैं, इसलिए कोई भी योगदान अद्भुत होगा।

— जोएल दिवस

Answer 2

टाइपस्क्रिप्ट और PropTypes विभिन्न उद्देश्यों की पूर्ति करते हैं। टाइपस्क्रिप्ट कंपाइल समय पर प्रकारों को मान्य करता है , जबकि प्रोपराइप्स को रनटाइम पर चेक किया जाता है ।

जब आप कोड लिख रहे होते हैं तो टाइपस्क्रिप्ट उपयोगी होता है: यदि आप अपने रिएक्ट घटकों को गलत प्रकार का तर्क देते हैं, तो यह आपको चेतावनी देगा कि आप फ़ंक्शन कॉल के लिए स्वत: पूर्ण हों, आदि।

PropTypes उपयोगी होते हैं जब आप परीक्षण करते हैं कि घटक बाहरी डेटा के साथ कैसे इंटरैक्ट करते हैं, उदाहरण के लिए जब आप JSON को किसी API से लोड करते हैं। PropTypes आपको डीबग करने में मदद करेगा (जब रिएक्ट्स डेवलपमेंट मोड में) क्यों उपयोगी संदेश प्रिंट करके आपका घटक विफल हो रहा है:

Warning: Failed prop type: Invalid prop `id` of type `number` supplied to `Table`, expected `string`

भले ही ऐसा लगता है कि टाइपस्क्रिप्ट और PropTypes एक ही काम करते हैं, वे वास्तव में ओवरलैप नहीं करते हैं। लेकिन टाइपस्क्रिप्ट से PropTypes को स्वचालित रूप से जनरेट करना संभव है ताकि आपको दो बार प्रकार निर्दिष्ट न करना पड़े, उदाहरण के लिए देखें:

• https://github.com/milesj/babel-plugin-typescript-to-proptypes
• https://github.com/grncdr/ts-react-loader#what-it-does
• https://github.com/gcanti/prop-types-ts

Comments

क्या प्रॉपर और टाइपस्क्रिप्ट टाइप सिंक से आसानी से निकल जाते हैं? क्या किसी के पास हमें बताने के लिए रखरखाव का अनुभव है?

— लियोनार्डो

यह सही जवाब है! PropTypes (रन-टाइम) स्थिर प्रकार की जाँच (संकलन समय) के समान नहीं हैं। इसलिए दोनों का उपयोग करना 'व्यर्थ अभ्यास' नहीं है।

— हंस

यहां तरीका देखें: स्थिर प्रकार PropTypes से अनुमान लगाया जा सकता पर एक अच्छी व्याख्या है dev.to/busypeoples/...

— हंस

रंटाइम बनाम संकलन समय का मतलब यह नहीं है कि आपके पास गर्म रील और एस्लिंट के साथ क्यू क्लिंट है। जो सहेजने पर त्रुटियाँ उत्पन्न करता है।

— जूलिया

@ जूलिया, हॉट रीलोड में रनटाइम के साथ कुछ भी सामान्य नहीं है। यहां तक ​​कि गर्म

— रील के

Answer 3

मुझे लगता है कि कुछ गड़बड़ स्थितियों में, जहां प्रॉप्स के प्रकार को संकलन समय पर नहीं खोजा जा सकता है, तो propTypesरन टाइम के उपयोग से उत्पन्न किसी भी चेतावनी को देखना उपयोगी होगा ।

एक ऐसी स्थिति होगी जब बाहरी स्रोत से डेटा संसाधित करना, जिसके लिए प्रकार की परिभाषाएँ उपलब्ध नहीं हैं, जैसे कि आपके नियंत्रण से परे बाहरी एपीआई। आंतरिक एपीआई के लिए, मुझे लगता है कि लिखने की कोशिश के लायक है (या बेहतर, उत्पन्न) प्रकार की परिभाषाएं, यदि वे पहले से उपलब्ध नहीं हैं।

इसके अलावा, मुझे वास्तव में कोई लाभ नहीं दिखाई देता है (जो कि मैंने कभी भी व्यक्तिगत रूप से इसका उपयोग नहीं किया है)।

Comments

PropTypes सत्यापन भी डेटा डेटा को वैमानिक रूप से लोड (AJAX के माध्यम से सर्वर से) को मान्य करने के लिए समझ में आता है। PropTypes रनटाइम सत्यापन है, और इस प्रकार यह वास्तव में सामान को डिबग करने में मदद कर सकता है। समस्याओं के रूप में स्पष्ट और मानव के अनुकूल संदेशों का उत्पादन होगा।

— e1v