रिएक्ट के साथ टाइपस्क्रिप्ट का उपयोग करना - एक शुरुआती गाइड

दोस्तों, सप्ताहांत की पूर्व संध्या पर हम आपके साथ एक और दिलचस्प प्रकाशन साझा करना चाहते हैं, जिसे हम "जावास्क्रिप्ट डेवलपर" पाठ्यक्रम पर एक नए समूह के लॉन्च के साथ मेल खाना चाहते हैं।



पिछले कुछ महीनों में टाइपस्क्रिप्ट का उपयोग करके रिएक्ट एप्लिकेशन और लाइब्रेरी विकसित करने के बाद, मैंने इस दौरान सीखी गई कुछ चीजों को साझा करने का निर्णय लिया। इस गाइड में, मैं आपको उन टेम्पलेट्स के बारे में बताऊंगा जिनका उपयोग मैं 80% मामलों में टाइपस्क्रिप्ट और रिएक्ट के लिए करता हूं।

क्या मुझे रिएक्ट एप्लिकेशन डेवलपमेंट के लिए टाइपस्क्रिप्ट सीखना चाहिए? लायक, अभी भी इसके लायक है! खुद के लिए, मैंने अभ्यास में महसूस किया कि सख्त टाइपिंग से बहुत अधिक विश्वसनीय कोड, तेजी से विकास, विशेष रूप से बड़ी परियोजनाओं में लिखा जाता है। सबसे पहले, आप शायद निराश होंगे, लेकिन जैसा कि आप काम करते हैं, आप पाएंगे कि कम से कम एक न्यूनतम टेम्पलेट वास्तव में बहुत सहायक होगा।

और अगर आप किसी चीज पर अटके हैं, तो याद रखें कि आप हमेशा किसी भी चीज को टाइप कर सकते हैं। कोई भी आपका नया दोस्त है और अब हम सीधे उदाहरणों में पास करेंगे।

आपका कोर टाइपस्क्रिप्ट के साथ घटक प्रतिक्रिया करता है

टाइपस्क्रिप्ट पर मानक प्रतिक्रिया घटक कैसा दिखता है? आइए इसकी तुलना जावास्क्रिप्ट में प्रतिक्रिया घटक के साथ करें।

import React from 'react' import PropTypes from 'prop-types' export function StandardComponent({ children, title = 'Dr.' }) { return ( <div> {title}: {children} </div> ) } StandardComponent.propTypes = { title: PropTypes.string, children: PropTypes.node.isRequired, } 

और अब टाइपस्क्रिप्ट संस्करण:

 import * as React from 'react' export interface StandardComponentProps { title?: string children: React.ReactNode } export function StandardComponent({ children, title = 'Dr.', }: StandardComponentProps) { return ( <div> {title}: {children} </div> ) } 

बहुत समान है, है ना? हमने typescript इंटरफ़ेस के साथ propTypes को बदल दिया।

prop हेडर वैकल्पिक रहता है, जबकि वारिस का प्रोप अभी भी आवश्यक है। यदि किसी अन्य घटक को इसके लिंक की आवश्यकता होती है, तो हमने अपना इंटरफ़ेस निर्यात किया।

मानक HTML गुण का विस्तार

यदि हम चाहते हैं कि मूल घटक अतिरिक्त टाइप किए गए div विशेषताएँ प्रदान करने में सक्षम हो, जैसे कि aria-hidden , style या className , तो हम उन्हें interface में परिभाषित कर सकते हैं या अंतर्निहित interface विस्तार कर सकते हैं। नीचे दिए गए उदाहरण में, हम कहते हैं कि हमारा घटक हेडर और वंश के अतिरिक्त किसी भी मानक div गुणों को स्वीकार करता है।

 import * as React from 'react' export interface SpreadingExampleProps extends React.HTMLAttributes<HTMLDivElement> { title?: string children: React.ReactNode } export function SpreadingExample({ children, title = 'Dr.', ...other }: SpreadingExampleProps) { return ( <div {...other}> {title}: {children} </div> ) } 

इवेंट हैंडलिंग

हम ईवेंट हैंडलर को यह सुनिश्चित करने के लिए टाइप कर सकते हैं कि ईवेंट तर्क सही प्रकार का है। नीचे दिया गया उदाहरण इस लक्ष्य को प्राप्त करने के विभिन्न तरीकों को प्रदर्शित करता है:

 export interface EventHandlerProps { onClick: (e: React.MouseEvent) => void } export function EventHandler({ onClick }: EventHandlerProps) { // handle focus events in a separate function function onFocus(e: React.FocusEvent) { console.log('Focused!', e.currentTarget) } return ( <button onClick={onClick} onFocus={onFocus} onKeyDown={e => { // When using an inline function, the appropriate argument signature // is provided for us }} > Click me! </button> ) } 

निश्चित नहीं है कि किस तर्क हस्ताक्षर का उपयोग करना है? संपादक में, ईवेंट हैंडलर की संबंधित संपत्ति पर होवर करें।

प्रतिक्रिया घटकों के साथ जेनरिक का उपयोग करना

यह एक अधिक उन्नत सुविधा है, लेकिन यह वास्तव में शक्तिशाली है। आमतौर पर, आप विशिष्ट विशेषताओं के साथ प्रतिक्रिया घटकों में डेटा प्रकारों को परिभाषित करते हैं। मान लीजिए कि आपके घटक को एक profile ऑब्जेक्ट की आवश्यकता है।

 interface ProfileType { name: string image: string age: number | null } interface ProfilesProps { profiles: Array<ProfileType> } function Profiles(props: ProfilesProps) { // render a set of profiles } 

अब आइए कल्पना करें कि आपके पास एक घटक है जो किसी भी प्रकार की एक सरणी को स्वीकार कर सकता है। जेनरिक मेलिंग पार्सल की तरह होते हैं। कूरियर (हमारे घटक) को आपके द्वारा भेजे जा रहे पैकेज की सामग्री को जानने की आवश्यकता नहीं है, लेकिन प्रेषक (माता-पिता घटक) प्राप्तकर्ता को उस सामग्री को प्राप्त करने की अपेक्षा करता है जो उसने भेजा था।

हम इसे इस तरह लागू करते हैं:

 interface GenericsExampleProps<T> { children: (item: T) => React.ReactNode items: Array<T> } export function GenericsExample<T>({ items, children, }: GenericsExampleProps<T>) { return ( <div> {items.map(item => { return children(item) })} </div> ) } 

थोड़ा अजीब उदाहरण ... फिर भी, यह सार प्रदर्शित करता है। घटक किसी भी प्रकार के तत्वों की एक सरणी को स्वीकार करता है, इसके माध्यम से गुजरता है और एक सरणी तत्व के साथ children फ़ंक्शन को एक रेंडर फ़ंक्शन के रूप में बुलाता है। जब हमारे मूल घटक एक अनुवर्ती के रूप में रेंडर रेंडर प्रदान करते हैं, तो तत्व को सही ढंग से टाइप किया जाएगा!

नहीं समझे? यह सामान्य है। मैंने खुद भी जेनेरिक को अंत तक नहीं समझा है, लेकिन आपको उन्हें अच्छी तरह से समझने की आवश्यकता नहीं है। हालांकि, आप जितना अधिक typescript साथ काम करेंगे, उतना ही यह समझ में आएगा।

टाइपिंग हुक

हुक ज्यादातर बॉक्स से बाहर काम करते हैं। दो अपवादों का उपयोग केवल उपयोग किया जा सकता है। नीचे दिए गए उदाहरण से पता चलता है कि हम कैसे refs लिख सकते हैं।

 import * as React from 'react' interface HooksExampleProps {} export function HooksExample(props: HooksExampleProps) { const [count, setCount] = React.useState(0) const ref = React.useRef<HTMLDivElement | null>(null) // start our timer React.useEffect( () => { const timer = setInterval(() => { setCount(count + 1) }, 1000) return () => clearTimeout(timer) }, [count] ) // measure our element React.useEffect( () => { if (ref.current) { console.log(ref.current.getBoundingClientRect()) } }, [ref] ) return <div ref={ref}>Count: {count}</div> } 

हमारा राज्य स्वचालित रूप से टाइप किया गया है, लेकिन हमने मैन्युअल रूप से यह संकेत देने के लिए टाइप किया है कि यह null होगा या इसमें एक div तत्व होगा। जब हम useEffect फ़ंक्शन में रेफ को एक्सेस करते हैं, तो हमें यह सुनिश्चित करने की आवश्यकता है कि यह null नहीं है।

गियरबॉक्स टाइपिंग

गियरबॉक्स के साथ थोड़ा और अधिक जटिल है, लेकिन अगर यह ठीक से टाइप किया गया है, तो यह बहुत अच्छा है।

 // Yeah, I don't understand this either. But it gives us nice typing // for our reducer actions. type Action<K, V = void> = V extends void ? { type: K } : { type: K } & V // our search response type interface Response { id: number title: string } // reducer actions. These are what you'll "dispatch" export type ActionType = | Action<'QUERY', { value: string }> | Action<'SEARCH', { value: Array<Response> }> // the form that our reducer state takes interface StateType { searchResponse: Array<Response> query: string } // our default state const initialState: StateType = { searchResponse: [], query: '', } // the actual reducer function reducer(state: StateType, action: ActionType) { switch (action.type) { case 'QUERY': return { ...state, query: action.value, } case 'SEARCH': return { ...state, searchResponse: action.value, } } } interface ReducerExampleProps { query: string } export function ReducerExample({ query }: ReducerExampleProps) { const [state, dispatch] = React.useReducer(reducer, initialState) React.useEffect( () => { if (query) { // emulate async query setTimeout(() => { dispatch({ type: 'SEARCH', value: [{ id: 1, title: 'Hello world' }], }) }, 1000) } }, [query] ) return state.searchResponse.map(response => ( <div key={response.id}>{response.title}</div> )) } 

कंपोनेंट ऑप्शन को keyof करने के लिए keyof और keyof का उपयोग करना

मान लें कि हमें एक बटन की आवश्यकता है जिसका एक अलग रूप हो सकता है, जिनमें से प्रत्येक को ऑब्जेक्ट में कुंजी और शैलियों के सेट के साथ परिभाषित किया गया है, उदाहरण के लिए:

 const styles = { primary: { color: 'blue', }, danger: { color: 'red', }, } 

हमारे बटन घटक को एक type संपत्ति स्वीकार करनी चाहिए, जो हो सकती है
styles ऑब्जेक्ट से कोई भी कुंजी (उदाहरण के लिए, "प्राथमिक" या "खतरे" )। हम इसे काफी सरलता से टाइप कर सकते हैं:

 const styles = { primary: { color: 'blue', }, danger: { color: 'red', }, } // creates a reusable type from the styles object type StylesType = typeof styles // ButtonType = any key in styles export type ButtonType = keyof StylesType interface ButtonProps { type: ButtonType } export function Button({ type = 'primary' }: ButtonProps) { return <button style={styles[type]}>My styled button</button> } 

ये उदाहरण आपको 80% रास्ता तय करने में मदद करेंगे। यदि आप फंस गए हैं, तो यह अक्सर योग्य है
बस मौजूदा खुले स्रोत उदाहरणों पर एक नज़र डालें।

सांचो यूआई प्रतिक्रिया घटकों का एक सेट है,
टाइपस्क्रिप्ट और भावना का उपयोग करके बनाया गया।
ब्लूप्रिंट घटकों का एक और सेट है
typescript पर निर्मित react ।

खैर, स्थापित परंपरा के अनुसार, हम आपकी टिप्पणियों की प्रतीक्षा कर रहे हैं।