टाइपस्क्रिप्ट + रिएक्ट / रिडक्स: प्रॉपर्टी "XXX" टाइप पर मौजूद नहीं है 'IntrinsicAttributes & IntrinsicClassAttributes

Question 1

मैं टाइपस्क्रिप्ट, रिएक्ट और रेडक्स (इलेक्ट्रॉन में चलने वाले सभी) के साथ एक परियोजना पर काम कर रहा हूं, और मैं एक समस्या में चला गया हूं जब मैं एक वर्ग आधारित घटक को दूसरे में शामिल कर रहा हूं और उनके बीच मापदंडों को पारित करने की कोशिश कर रहा हूं। धीरे-धीरे बोलना, मुझे कंटेनर घटक के लिए निम्न संरचना मिली है:

class ContainerComponent extends React.Component<any,any> {
  ..
  render() {
    const { propToPass } = this.props;
    ...
    <ChildComponent propToPass={propToPass} />
    ...
  }
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent);

और बच्चे घटक:

interface IChildComponentProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps, any> {
  ...
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);

जाहिर है कि मैं केवल मूल बातें शामिल कर रहा हूं और इन दोनों वर्गों के लिए बहुत कुछ है लेकिन मुझे अभी भी एक त्रुटि हो रही है जब मैं कोशिश करता हूं और मुझे मान्य कोड की तरह दिखता है। सटीक त्रुटि जो मुझे मिल रही है:

TS2339: Property 'propToPass' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.

जब मुझे पहली बार त्रुटि का सामना करना पड़ा तो मुझे लगा कि यह इसलिए था क्योंकि मैं अपने प्रॉम्प्ट को परिभाषित करने वाले इंटरफ़ेस में नहीं गुजर रहा था, लेकिन मैंने इसे बनाया (जैसा कि आप ऊपर देख सकते हैं) और यह अभी भी काम नहीं करता है। मुझे आश्चर्य हो रहा है, क्या मुझे कुछ याद आ रहा है?

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

Question 2

इसलिए कुछ संबंधित उत्तरों को पढ़ने के बाद (विशेष रूप से यह एक और यह एक और प्रश्न के लिए @ बेसरात के उत्तर को देखते हुए, मैं कुछ ऐसा खोजने में कामयाब रहा, जो मेरे लिए काम करता है। यह दिखता है (मेरी अपेक्षाकृत नई प्रतिक्रिया की आंखों में) जैसे कि कनेक्ट आपूर्ति नहीं कर रहा था। कंटेनर घटक के लिए स्पष्ट इंटरफ़ेस, इसलिए यह इस प्रस्ताव से भ्रमित था कि यह पारित करने की कोशिश कर रहा था।

इसलिए कंटेनर घटक वही रहा, लेकिन बच्चे के घटक में थोड़ा बदलाव आया:

interface IChildComponentProps extends React.Props<any> {
  ... (other props needed by component)
}

interface PassedProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps & PassedProps, any> {
  ...
}

....
export default connect<{}, {}, PassedProps>(mapStateToProps, mapDispatchToProps)    (ChildComponent);

ऊपर वाला मेरे लिए काम करने में कामयाब रहा। स्पष्ट रूप से गुजरता है कि घटक कंटेनर से उम्मीद कर रहा है काम करने के लिए लग रहा था और दोनों घटकों को ठीक से प्रदान किया गया।

नोट: मुझे पता है कि यह एक बहुत ही सरल उत्तर है और मुझे यकीन नहीं है कि यह काम क्यों करता है, इसलिए यदि एक अधिक अनुभवी रिएक्ट निंजा इस उत्तर पर कुछ ज्ञान छोड़ना चाहता है तो मुझे इसमें संशोधन करने में खुशी होगी।

Question 3

नए जोड़े गए ऑब्जेक्ट प्रकारों को दोबारा जांचें। जब ऑब्जेक्ट प्रकार बिल्कुल अपेक्षित नहीं है तो ऐसी त्रुटि फेंक दी जाती है।

पूर्व। घटक में वर्णित प्रॉप्स का प्रकार उस प्रॉम्प्ट के प्रकार के साथ मेल खाना चाहिए जो उस घटक को पास किया जाता है।

Question 4

इसके बजाय डेकोरेटर https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/app-fileTree.tsx#L136-L146export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent); पसंद करेंconnect

@connect((state: StoreState): Props => {
    return {
        filePaths: state.filePaths,
        filePathsCompleted: state.filePathsCompleted,
        rootDir: state.rootDir,
        activeProjectFilePathTruthTable: state.activeProjectFilePathTruthTable,
        fileTreeShown: state.fileTreeShown,
    };
})

जहाँ कनेक्ट को यहाँ परिभाषित किया गया है https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/typings-react-redux/redct.d.ts#L6-L36-L36

क्यों?

आपके द्वारा उपयोग की जा रही परिभाषाओं की तरह शायद तारीख से बाहर हैं या अमान्य (शायद खराब लेखक हैं)।