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

2016 में, टाइपस्क्रिप्ट ने नई ऊंचाइयों पर ले जाना शुरू किया। डेवलपर्स ने इस पर कई लोकप्रिय तकनीकों को पूरी तरह से फिर से लिखना और मौजूदा प्लेटफार्मों के लिए स्थैतिक विश्लेषण के लिए समर्थन जोड़ना शुरू कर दिया। इस तरह की वैश्विक प्रक्रिया ने हजारों के कोड आधार और यहां तक ​​कि हजारों परियोजनाओं के लिए अधिक स्थिरता जोड़ी।

क्यों प्रतिक्रिया आज तक, यह पुस्तकालय प्रतियोगियों की पृष्ठभूमि के खिलाफ निस्संदेह हावी है। रिएक्ट के आसपास, दुनिया में डेवलपर्स का सबसे बड़ा समुदाय बना है। इस प्लेटफ़ॉर्म पर हर तीसरा एसपीए लिखा हुआ है। रिएक्ट नेटिव, आईओएस, यूडब्ल्यूपी और एंड्रॉइड एप्लिकेशन पर आधारित रिएक्ट.जेएस का उपयोग करने से संबंधित कई बेहतरीन परियोजनाएं भी हैं।

इसलिए, आज हम उन संभावनाओं पर एक नज़र डालते हैं जो दो सुपर लोकप्रिय उपकरणों का एकीकरण देती हैं: टाइपस्क्रिप्ट और रिएक्ट।

उदाहरण

सबसे पहले, आइए देखें कि हम रिएक्ट के लिए किस प्रकार का उपयोग कर सकते हैं।
आइए सरल शुरू करें और कार्यात्मक घटक में प्रकार जोड़ें।

import * as React from 'react'; const HelloWorld: React.FunctionComponent<{ name: string; }> = ({ name = 'World' }) => { return <div>Hello, {props.name}</div>; }; export default HelloWorld; 

कार्यात्मक घटक या स्टेटलेस घटक के लिए, हमें React.FunctionComponent प्रकार की परिभाषा का उपयोग करना चाहिए। हम प्रॉपर तर्क के लिए प्रकार भी परिभाषित कर सकते हैं - फ़ील्ड जो घटक को पास करता है। इस स्थिति में, प्रॉप्स में केवल प्रकार स्ट्रिंग का नाम फ़ील्ड हो सकता है।

यह सब जटिल नहीं लगता है। वर्ग घटकों के बारे में क्या?

 import * as React from 'react'; interface State { name: string; } interface Props {} class HelloWorld extends React.Component<Props, State> { state = { name: 'World' } setName(name: string) { this.setState({ name }); } redner() { return ( <React.Fragment> <hI>Hello, {this.state.name}</hI> <input value={this.state.name} onChange={(e) => this.setName(e.target.value)} /> </React.Fragment> ); } } 

कक्षा के उदाहरण में, हमने दो इंटरफेस बनाए: प्रॉप्स और स्टेट। उनकी मदद से, हमने आने वाले प्रॉप्स (खाली) और घटक की स्थिति के हस्ताक्षर को निर्धारित किया - जैसे कि कार्यात्मक घटकों के साथ उदाहरण में।

हम डिफ़ॉल्ट प्रॉप्स मान भी जोड़ सकते हैं।

 import * as React from 'react'; interface Props { name?: string; } export default class HelloWorld extends React.Component<Props> { static defaultProps: Props = { name: 'World' }; render () { return <hI>Hello, {this.props.name}</hI>; } } 

वह सब है! हमारा छोटा रिएक्ट एप्लिकेशन पहले से ही मापदंडों और घटक राज्य मूल्यों के स्तर पर दृढ़ता से टाइप किया गया है।

आइए उन फायदों पर नजर डालते हैं, जिनसे हमें यह मिला:

• संकलन के चरण में हम सभी प्रकार के बेमेल देखेंगे;
• एक उचित रूप से कॉन्फ़िगर किया गया संपादक हमें विकास के चरणों में गलतियों से बचने में मदद करेगा, बस हस्ताक्षर या डेटा प्रकार की विसंगतियों को उजागर करके;
• इंटरफेस और प्रकार परिभाषा से प्रलेखन।

मापदंडों में Enum

Enum एक एन्यूमरेटेड डेटा प्रकार है। यदि हम इस प्रकार को एक चर या इंटरफ़ेस क्षेत्र में जोड़ते हैं, तो इस क्षेत्र या चर का मान केवल Enum में विशिष्ट मान हो सकता है।
उदाहरण के लिए।

  import * as React from 'react'; enum Colors { RED, BLUE, GREEN } const ColorResult: React.FunctionComponent<{ color: Colors; }> = ({ color = Colors.Red }) => { return <div>Your color is {props.color}</div>; }; export default ColorResult; 

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

सख्त रेडक्स

2019 में, हमारे पास अभी भी Redux पर कई एप्लिकेशन चल रहे हैं। टाइपस्क्रिप्ट इस स्थिति में मदद कर सकता है।

 import * as React from 'react'; const initialState = { name: 'World' }; type HelloWorldStateProps = Readonly<typeof initialState>; interface Action { type: string; name?: string; } const worldNameReducer = ( state: HelloWorldStateProps = initialState, action: Action ): HelloWorldStateProps => { switch (action.type) { case "SET": return { name: action.name }; case "CLEAR": return { name: initialState.name }; default: return state; } }; const set = (name): Action => ({ type: "SET", name }); const clear = (): Action => ({ type: "CLEAR" }); const store = createStore( combineReducers({ world: worldNameReducer }) ); type StateProps = ReturnType<typeof mapStateToProps>; type DispatchProps = typeof mapDispatchToProps; interface AppProps extends StateProps, DispatchProps {} interface AppState extends StateProps {} class App extends React.Component<AppProps, AppState> { state = { name: initialState.name } setName(name: string) { this.setState({ name }); } render() { const { set, clear, name } = this.props; return ( <div> <hI>Hello, {name}</hI> <input value={this.state.name} onChange={(e) => this.setName(e.target.value)} /> <button onClick={() => set(this.state.name)}>Save Name</button> <button onClick={() => clear()}>Clear</button> </div> ); } } const mapStateToProps = ({ world }: { world: HelloWorldStateProps }) => ({ name: world.name, }); const mapDispatchToProps = { set, clear }; const AppContainer = connect( mapStateToProps, mapDispatchToProps )(App); render( <Provider store={store}> <AppContainer /> </Provider>, document.getElementById("root") ); 

इस उदाहरण में, हम कई स्तरों पर एक बार आवेदन में प्रकार जोड़ते हैं। सबसे पहले, यह स्वयं reducers है। इनपुट रिड्यूसर एक्शन को स्वीकार करता है, और उसे हमेशा एक ऐसी वस्तु वापस करनी चाहिए जो HelloWorldStateProps से मेल खाती है। यह देखते हुए कि आधुनिक अनुप्रयोग में कितने रेड्यूसर हैं, यह एक बहुत ही उपयोगी नवाचार है। साथ ही, हमारे द्वारा की गई प्रत्येक कार्रवाई में एक सख्त कार्रवाई हस्ताक्षर है।

टाइपिंग का अगला स्तर घटक है। यहां हमने AppProps और AppState के प्रकार इनहेरिटेंस लागू किए हैं। जब हम पहले से ही इस तरह के हस्ताक्षर के साथ डेटा प्रकार हैं तो अधिक क्यों लिखें? सिस्टम को बनाए रखना आसान है यदि आप कुछ तत्वों को बदलते हैं, तो सभी उत्तराधिकारियों के लिए परिवर्तन होंगे।

निष्कर्ष

टाइपस्क्रिप्ट जावास्क्रिप्ट के शीर्ष पर चलने वाली एक बहुत ही उपयोगी भाषा है। प्रतिक्रिया के साथ संयोजन के रूप में, यह फ्रंटएंड अनुप्रयोगों के लिए वास्तव में प्रभावशाली प्रोग्रामिंग अभ्यास प्रदान करता है।