टाइपस्क्रिप्ट 2.3 में नए जोड़े गए समर्थन का उपयोग करके, मैं टाइपस्क्रिप्ट में रिएक्ट चिल्ड्रेन के प्रकार को कैसे प्रतिबंधित करूं?

Question

मैं टाइपस्क्रिप्ट कंपाइलर और @ प्रकार/प्रतिक्रिया में recently added support for typing of children का लाभ लेने की कोशिश कर रहा हूं, लेकिन संघर्ष कर रहा हूं। मैं टाइपस्क्रिप्ट संस्करण 2.3.4 का उपयोग कर रहा हूँ।

return <TabbedView> 
    <Tab name="Creatures"> 
    <div>Creatures!</div> 
    </Tab> 
    <Tab name="Combat"> 
    <div>Combat!</div> 
    </Tab> 
</TabbedView>; 

इस प्रकार मैं कोई त्रुटि मिलती है:

ERROR in ./src/typescript/PlayerView.tsx 
(27,12): error TS2322: Type '{ children: Element[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<TabbedView> & Readonly<{ children?: ReactNode; }> ...'. 
    Type '{ children: Element[]; }' is not assignable to type 'Readonly<TabbedViewProps>'. 
    Types of property 'children' are incompatible. 
     Type 'Element[]' is not assignable to type 'Tab[] | undefined'. 
     Type 'Element[]' is not assignable to type 'Tab[]'. 
      Type 'Element' is not assignable to type 'Tab'. 
      Property 'render' is missing in type 'Element'. 

यह जब मैं तो जैसे इन घटकों इस्तेमाल करने की कोशिश

interface TabbedViewProps {children?: Tab[]} 
export class TabbedView extends React.Component<TabbedViewProps, undefined> { 

    render(): JSX.Element { 
    return <div>TabbedView</div>; 
    } 
} 

interface TabProps {name: string} 
export class Tab extends React.Component<TabProps, undefined> { 
    render(): JSX.Element { 
    return <div>Tab</div> 
    } 
} 

:

मैं इस तरह कोड है कहो ऐसा लगता है कि Tab[] के बजाय बच्चों के प्रकार को Element[] के रूप में शामिल किया गया है, भले ही ' मैं केवल बच्चों का उपयोग कर रहा हूं।

संपादित करें: बच्चों के घटकों के प्रकार को सीमित करने के बजाय बच्चों के इंटरफेस को के इंटरफ़ेस को प्रतिबंधित करना भी ठीक होगा, क्योंकि मुझे बस इतना करना है कि बच्चों के घटकों से कुछ विशिष्ट प्रोप खींचें।

Answer 1

टाइप करें आप टैब रेंडर विधि में लौट रहे हैं JSX.Element। यही कारण है कि आपकी समस्या का कारण बनता है। TabbedView टाइप टैब वाले बच्चों की सरणी की उम्मीद कर रहा है। मुझे यकीन नहीं है कि क्या आप बच्चों के प्रकार के रूप में एक निश्चित घटक निर्दिष्ट कर सकते हैं। यह स्ट्रिंग या जेएसएक्स हो सकता है। एलिमेंट। क्या आप टैब के लिए परिभाषा फाइल दिखा सकते हैं?

यह देखने के लिए कि JSX.Element इंटरफ़ेस कैसा दिखता है, https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts पर देखें।