प्रैक्टिकल टाइपस्क्रिप्ट। प्रतिक्रिया + रिडक्स

वर्तमान में, किसी भी आधुनिक फ्रंट-एंड एप्लिकेशन का विकास hello world स्तर की तुलना में अधिक जटिल है, जिस पर टीम काम कर रही है (जिसमें समय-समय पर परिवर्तन होता है), कोड बेस की गुणवत्ता पर उच्च मांग करता है। उचित स्तर पर कोड की गुणवत्ता के स्तर को बनाए रखने के लिए, हम #gostgroup फ्रंट - एंड टीम में अद्यतित रहते हैं और आधुनिक तकनीकों का उपयोग करने से डरते नहीं हैं जो विभिन्न पैमानों की कंपनियों की परियोजनाओं में अपना व्यावहारिक लाभ दिखाते हैं ।

टाइपस्क्रिप्ट के उदाहरण पर स्टेटिक टाइपिंग और इसके लाभों की विभिन्न लेखों में बहुत चर्चा की गई है, और इसलिए आज हम अधिक लागू कार्यों पर ध्यान केंद्रित करेंगे, जो फ्रंट-एंड डेवलपर्स को हमारी टीम के पसंदीदा स्टैक (रिएक्ट + रेडक्स) के उदाहरण के रूप में सामना करना पड़ता है।

"मुझे समझ में नहीं आता है कि आप आम तौर पर एक सख्त टाइपिंग के बिना कैसे रहते हैं। आप क्या कर रहे हैं? अंत के दिनों के लिए डेबिट?" - लेखक को मेरी जानकारी नहीं है।

"नहीं, हम पूरे दिन प्रकार लिखते हैं" - मेरे सहयोगी।

टाइपस्क्रिप्ट में कोड लिखते समय (पाठ में बाद में विषय ढेर हो जाएगा), कई लोग शिकायत करते हैं कि उन्हें मैन्युअल रूप से लिखने में बहुत समय लगाना पड़ता है। समस्या का चित्रण करने वाला एक अच्छा उदाहरण है react-redux से connect कनेक्टर फ़ंक्शन। आइए नीचे दिए गए कोड पर एक नज़र डालें:

 type Props = { a: number, b: string; action1: (a: number) => void; action2: (b: string) => void; } class Component extends React.PureComponent<Props> { } connect( (state: RootStore) => ({ a: state.a, b: state.b, }), { action1, action2, }, )(Component); 

यहाँ क्या समस्या है? समस्या यह है कि कनेक्टर के माध्यम से इंजेक्शन की गई प्रत्येक नई संपत्ति के लिए, हमें इस संपत्ति के सामान्य प्रकार के घटक गुणों (रिएक्शन) का वर्णन करना होगा। बहुत दिलचस्प व्यवसाय नहीं है, आप कहते हैं, आप अभी भी कनेक्टर से गुणों के प्रकार को एक प्रकार में इकट्ठा करने में सक्षम होना चाहते हैं, जो तब घटक के सामान्य प्रकार के गुणों को एक बार "कनेक्ट" करते हैं। मेरे पास आपके लिए खुशखबरी है। टाइपस्क्रिप्ट आपको आज ऐसा करने देता है! क्या आप तैयार हैं? चलो चलते हैं!

टाइपस्क्रिप्ट की शक्ति

टाइपस्क्रिप्ट अभी भी खड़ा नहीं है और लगातार विकसित हो रहा है (जिसके लिए मैं इसे प्यार करता हूं)। संस्करण 2.8 से शुरू होकर, इसमें एक बहुत ही दिलचस्प फ़ंक्शन (सशर्त प्रकार) दिखाई दिया, जो सशर्त अभिव्यक्तियों के आधार पर प्रकारों की मैपिंग की अनुमति देता है। मैं यहां विवरणों में नहीं जाऊंगा, लेकिन प्रलेखन के लिए एक लिंक छोड़ दूंगा और एक चित्र के रूप में उसमें से एक कोड डालूंगा:

 type TypeName<T> = T extends string ? "string" : T extends number ? "number" : T extends boolean ? "boolean" : T extends undefined ? "undefined" : T extends Function ? "function" : "object"; type T0 = TypeName<string>; // "string" type T1 = TypeName<"a">; // "string" type T2 = TypeName<true>; // "boolean" type T3 = TypeName<() => void>; // "function" type T4 = TypeName<string[]>; // "object" 

यह कार्य हमारे मामले में कैसे मदद करता है। react-redux लाइब्रेरी प्रकारों के विवरण को InferableComponentEnhancerWithProps , आप InferableComponentEnhancerWithProps प्रकार पा सकते हैं, जो यह सुनिश्चित करने के लिए ज़िम्मेदार है कि इंजेक्ट किए गए गुण बाहरी प्रकार के घटक गुणों में नहीं आते हैं, जिसे हमें घटक को तत्काल करते समय स्पष्ट रूप से सेट करना होगा। InferableComponentEnhancerWithProps प्रकार के दो सामान्य पैरामीटर हैं: TInjectedProps और TNeedsProps । हम पहले में रुचि रखते हैं। चलो इस कनेक्टर से इस प्रकार को "खींचने" का प्रयास करें!

 type TypeOfConnect<T> = T extends InferableComponentEnhancerWithProps<infer Props, infer _> ? Props : never ; 

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

 import React from 'react'; import { connect } from 'react-redux'; import { RootStore, init, TypeOfConnect, thunkAction, unboxThunk } from 'src/redux'; const storeEnhancer = connect( (state: RootStore) => ({ ...state, }), { init, thunkAction: unboxThunk(thunkAction), } ); type AppProps = {} & TypeOfConnect<typeof storeEnhancer> ; class App extends React.PureComponent<AppProps> { componentDidMount() { this.props.init(); this.props.thunkAction(3000); } render() { return ( <> <div>{this.props.a}</div> <div>{this.props.b}</div> <div>{String(this.props.c)}</div> </> ); } } export default storeEnhancer(App); 

ऊपर के उदाहरण में, हम दो चरणों में रिपॉजिटरी (रेडक्स) से कनेक्शन को विभाजित करते हैं। पहले चरण में, हम अपने TypeOfConnect हेल्पर TypeOfConnect और आगे संयोजन ( & प्रकार के चौराहे के माध्यम से) का उपयोग करके प्राप्त संपत्ति प्रकार के घटक के मूल संपत्ति प्रकारों के साथ इसे प्राप्त करने से InferableComponentEnhancerWithProps संपत्ति प्रकार निकालने के लिए एक उच्च-ऑर्डर घटक storeEnhancer (उर्फ InferableComponentEnhancerWithProps ) प्राप्त करते हैं। दूसरे चरण में, हम बस अपने मूल घटक को सजाते हैं। अब, जो भी आप कनेक्टर में जोड़ते हैं, वह स्वचालित रूप से घटक संपत्ति प्रकारों में गिर जाएगा। महान, जो हम हासिल करना चाहते थे!

एक चौकस पाठक ने देखा कि साइड इफेक्ट्स (थंक एक्शन क्रिएटर्स) के साथ एक्शन जनरेटर (संक्षिप्तता के लिए, हम कार्रवाई के लिए शब्द को सरल बनाते हैं) unboxThunk फ़ंक्शन का उपयोग करके अतिरिक्त प्रसंस्करण से unboxThunk हैं। इस तरह के एक अतिरिक्त उपाय का क्या कारण है? चलो ठीक है। पहले, चलो रिपोजिटरी से एक प्रोग्राम के उदाहरण का उपयोग करते हुए इस तरह के एक हस्ताक्षर को देखें:

 const thunkAction = (delay: number): ThunkAction<void, RootStore, void, AnyAction> => (dispatch) => { console.log('waiting for', delay); setTimeout(() => { console.log('reset'); dispatch(reset()); }, delay); }; 

जैसा कि आप हस्ताक्षर से देख सकते हैं, हमारी कार्रवाई तुरंत लक्ष्य फ़ंक्शन को वापस नहीं करती है, लेकिन पहले एक मध्यवर्ती है, जो हमारे मुख्य फ़ंक्शन में साइड इफेक्ट्स को सक्षम करने के लिए redux-middleware उठाता है। लेकिन घटक के गुणों में जुड़े हुए रूप में इस फ़ंक्शन का उपयोग करते समय, मध्यवर्ती फ़ंक्शन को छोड़कर, इस फ़ंक्शन के हस्ताक्षर कम हो जाते हैं। इसे प्रकारों में कैसे वर्णित किया जाए? एक विशेष कनवर्टर फ़ंक्शन की आवश्यकता है। फिर से टाइपस्क्रिप्ट अपनी शक्ति दिखाता है। सबसे पहले, हम उस प्रकार का वर्णन करते हैं जो हस्ताक्षर से मध्यवर्ती कार्य को हटाता है:

 CutMiddleFunction<T> = T extends (...arg: infer Args) => (...args: any[]) => infer R ? (...arg: Args) => R : never ; 

यहां, सशर्त प्रकारों के अलावा, हम टाइपस्क्रिप्ट 3.0 से एक बहुत हालिया नवाचार का उपयोग करते हैं, जो हमें फ़ंक्शन तर्कों की एक मनमानी (बाकी मापदंडों) की संख्या को कम करने की अनुमति देता है। विवरण के लिए दस्तावेज देखें। अब यह कठोर कार्रवाई के बजाय हमारी कार्रवाई से अतिरिक्त हिस्से को काटने के लिए बना हुआ है:

 const unboxThunk = <Args extends any[], R, S, E, A extends Action<any>>( thunkFn: (...args: Args) => ThunkAction<R, S, E, A>, ) => ( thunkFn as any as CutMiddleFunction<typeof thunkFn> ); 

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

इसलिए, सरल जोड़तोड़ के माध्यम से, हम अपने स्टैक पर टाइप किए गए कोड को लिखते समय अपने मैनुअल काम को कम करते हैं। यदि हम थोड़ा और आगे बढ़ते हैं, तो हम कार्रवाई और रीड्यूसर की टाइपिंग को भी सरल बना सकते हैं, जैसा कि हमने redux-modus में किया था।

PS जब फ़ंक्शन और redux.bindActionCreators माध्यम से कनेक्टर में क्रियाओं के गतिशील बंधन का उपयोग करते हैं redux.bindActionCreators तो हमें इस उपयोगिता के अधिक उचित प्रकार की देखभाल करने की आवश्यकता होगी (संभवतः हमारे अपने आवरण लिखकर)।

अपडेट 0
अगर किसी को लगा कि यह समाधान सुविधाजनक है, तो आप इसे पसंद कर सकते हैं ताकि @types/react-redux में टाइप उपयोगिता को जोड़ा जाए।

अपडेट १
कुछ और प्रकार जिनके साथ आपको हॉक के इंजेक्शन के प्रकार को स्पष्ट रूप से निर्दिष्ट करने की आवश्यकता नहीं है। बस होकी लें और उनमें से प्रकारों को बाहर निकालें:

 export type BasicHoc<T> = (Component: React.ComponentType<T>) => React.ComponentType<any>; export type ConfiguredHoc<T> = (...args: any[]) => (Component: React.ComponentType<T>) => React.ComponentType<any>; export type BasicHocProps<T> = T extends BasicHoc<infer Props> ? Props : never; export type ConfiguredHocProps<T> = T extends ConfiguredHoc<infer Props> ? Props : never; export type HocProps<T> = T extends BasicHoc<any> ? BasicHocProps<T> : T extends ConfiguredHoc<any> ? ConfiguredHocProps<T> : never ; const basicHoc = (Component: React.ComponentType<{a: number}>) => class extends React.Component {}; const configuredHoc = (opts: any) => (Component: React.ComponentType<{a: number}>) => class extends React.Component {}; type props1 = HocProps<typeof basicHoc>; // {a: number} type props2 = HocProps<typeof configuredHoc>; // {a: number} 

Update2
विषय से प्रकार अब @types/react-redux ( कनेक्टेडप्रॉप्स ) में है।