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

Question

में प्रतिक्रिया घटक का विस्तार करना मैं टाइपस्क्रिप्ट के साथ React.js का उपयोग कर रहा हूं। क्या अन्य घटकों से प्राप्त होने वाले प्रतिक्रिया घटकों को बनाने का कोई तरीका है लेकिन कुछ अतिरिक्त प्रोप/राज्य हैं?

क्या मैं प्राप्त करने के लिए कोशिश कर रहा हूँ कुछ इस तरह है:

interface BaseStates { 
    a: number; 
} 

class GenericBase<S extends BaseStates> extends React.Component<void, S> { 
    protected getBaseInitialState(): BaseStates { 
     return { a: 3 }; 
    } 
} 

class Base extends GenericBase<BaseStates> { 
    getInitialState(): BaseStates { 
     return super.getBaseInitialState(); 
    } 
} 

interface DerivedStates extends BaseStates { 
    b: number; 
} 

class Derived extends GenericBase<DerivedStates> { 
    getInitialState(): DerivedStates { 
     var initialStates = super.getBaseInitialState() as DerivedStates; // unsafe?? 
     initialStates.b = 4; 
     return initialStates 
    } 
} 

बहरहाल, यह अगर मैं Derived में this.setState फोन असफल हो जायेगी, मैं एक टाइपप्रति त्रुटि मिलती है (प्रकार DerivedStates के पैरामीटर टाइप करने के लिए आबंटित नहीं है S)। मुझे लगता है कि यह टाइपस्क्रिप्ट-विशिष्ट चीज नहीं है, लेकिन जेनेरिक (?) के साथ मिश्रित विरासत की एक सामान्य सीमा है। क्या इसके लिए कोई प्रकार का सुरक्षित कामकाज है?

अद्यतन

समाधान मैं पर बसे (डेविड Sherret के उत्तर के आधार पर):

interface BaseStates { 
    a: number; 
} 

class GenericBase<S extends BaseStates> extends React.Component<void, S> { 
    constructor() { 
     super(); 
     this.state = this.getInitialState(); 
    } 

    getInitialState(): S { 
     return { a: 3 } as S; 
    } 

    update() { 
     this.setState({ a: 7 } as S); 
    } 
} 

interface DerivedStates extends BaseStates { 
    b: number; 
} 

class Derived extends GenericBase<DerivedStates> { 
    getInitialState(): DerivedStates { 
     var initialStates = super.getInitialState(); 
     initialStates.b = 4; 
     return initialStates; 
    } 

    update() { 
     this.setState({ a: 7, b: 4 }); 
    } 
} 

Answer 1

आप एक का उपयोग करके Derived में एक ही बार में केवल राज्य के कुछ गुणों को सेट कर सकते हैं प्रकार अभिकथन:

this.setState({ b: 4 } as DerivedStates); // do this 
this.setState({ a: 7 } as DerivedStates); // or this 
this.setState({ a: 7, b: 4 });   // or this 

वैसे, getInitialState लिए अलग अलग नाम है करने के लिए कोई जरूरत नहीं ... आप बस कर सकते हैं:

class GenericBase<S extends BaseStates> extends React.Component<void, S> { 
    constructor() { 
     super();   
     this.state = this.getInitialState(); 
    } 

    protected getInitialState() { 
     return { a: 3 } as BaseStates as S; 
    } 
} 

class Derived extends GenericBase<DerivedStates> { 
    getInitialState() { 
     var initialStates = super.getInitialState(); 
     initialStates.b = 4; 
     return initialStates; 
    } 
}