टाइपस्क्रिप्ट

Question

का उपयोग कर प्रतिक्रिया उच्च उच्च घटक घटक के लिए एनोटेशन टाइप करें मैं टाइपस्क्रिप्ट का उपयोग कर अपने रिएक्ट प्रोजेक्ट के लिए एक उच्च ऑर्डर घटक लिख रहा हूं जो मूल रूप से एक फ़ंक्शन एक प्रतिक्रिया घटक को एक तर्क के रूप में स्वीकार करता है और इसके आसपास लपेटता हुआ एक नया घटक लौटाता है।

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

फंक्शन:।

export default function wrapperFunc <Props, State> (
    WrappedComponent: typeof React.Component, 
) { 
    return class extends React.Component<Props & State, {}> { 
     public render() { 
      return <WrappedComponent {...this.props} {...this.state} />; 
     } 
    }; 
} 

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

स्पष्ट रूप से वापसी प्रकार typeof React.Component निर्दिष्ट करने के साथ एक परीक्षण इस त्रुटि को दबाने के लिए करें।

स्पष्ट वापसी प्रकार के साथ सवाल में

फंक्शन:

export default function wrapperFunc <Props, State> (
    WrappedComponent: typeof React.Component, 
): typeof React.Component {      // <== Added this 
    return class extends React.Component<Props & State, {}> { 
     public render() { 
      return <WrappedComponent {...this.props} {...this.state} />; 
     } 
    }; 
} 

हालांकि, मैं इस दृष्टिकोण की वैधता के बारे में कुछ नहीं कर रहा हूँ। क्या इसे टाइपस्क्रिप्ट में इस विशेष त्रुटि से निपटने के लिए सही दृष्टिकोण माना जाता है? (या क्या मैं कहीं और अनपेक्षित साइड इफेक्ट्स बना रहा हूं? या ऐसा करने का कोई बेहतर तरीका?)

(संपादित करें) डैनियल के सुझाव के अनुसार उद्धृत कोड बदलें।

Answer 1

Type annotation for React Higher Order Component using TypeScript

वापसी प्रकार typeof React.Component सच्चा, लेकिन नहीं लपेटा घटक के उपयोगकर्ताओं के लिए बहुत उपयोगी है। यह घटक स्वीकार करता है कि घटक क्या प्रोप स्वीकार करता है।

प्रतिक्रिया टाइपिंग इस उद्देश्य के लिए एक आसान प्रकार प्रदान करती है, React.ComponentClass। यह बल्कि उस वर्ग से बनाए गए घटक के प्रकार की तुलना में एक वर्ग के प्रकार है,:

React.ComponentClass<Props> 

(ध्यान दें कि state प्रकार के रूप में यह एक आंतरिक विवरण दिया गया है उल्लेख नहीं है)।

आपके मामले में:

export default function wrapperFunc <Props, State, CompState> (
    WrappedComponent: typeof React.Component, 
): React.ComponentClass<Props & State> { 
    return class extends React.Component<Props & State, CompState> { 
     public render() { 
      return <WrappedComponent {...this.props} {...this.state} />; 
     } 
    }; 
} 

हालांकि, अगर आप WrappedComponent पैरामीटर के साथ एक ही बात कर रहे हैं। आप इसे कैसे render अंदर उपयोग कर रहे हैं के आधार पर, मेरा अनुमान है कि यह है कि यह भी घोषित किया जाना चाहिए:

WrappedComponent: React.ComponentClass<Props & State>, 

लेकिन इस जंगली अनुमान है के रूप में मुझे लगता है यह पूरा समारोह (CompState नहीं किया जाता है नहीं है, और Props & State एक प्रकार का पैरामीटर भी हो सकता है क्योंकि यह हमेशा उस संयोजन में दिखाई देता है)।

Answer 2

इनपुट पैरामीटर के लिए एक और उचित प्रकार React.ComponentType होगा, क्योंकि यह स्टेटलेस घटकों को भी संभालता है।

type ComponentType<P = {}> = ComponentClass<P> | StatelessComponent<P> 

इसके उपयोग को स्पष्ट करने वाला एक उदाहरण निम्नलिखित है।

import * as React from 'react'; 

export default function <P = {}>(
    WrappedComponent: React.ComponentType<P> 
): React.ComponentClass<P> { 
    return class extends React.Component<P> { 
    render() { 
     return <WrappedComponent {...this.props} />; 
    } 
    }; 
}