So erweitern Sie eine Schnittstelle der erweiterten Klasse

Question

Ich benutze die neuesten Typoskript und reactjs Versionen zusammen und habe ein Problem mit erweiterten Klassen und die Erweiterung seiner Schnittstellen.

Für mehrere Formularelemente (alle haben die gleichen Validierungsmethoden) i eine BaseComponent erstellt haben, die wie folgt aussieht:

/// <reference path="../typings/tsd.d.ts" /> 
import React = require('react'); 

interface P { 
    id: string 
    onChange: Function 
    error: string 
} 

interface S { 
    value: string 
    isValid: boolean 
} 

class BaseComponent extends React.Component<P, S> { 
    protected isValid(value) { 
     //do stuff 
    } 
} 

export default BaseComponent; 

und die Komponente, die aus der BaseComponent erweitert:

/// <reference path="../typings/tsd.d.ts" /> 
import React = require('react'); 
import BaseComponent from './baseComponent'; 

interface P { 
    id: string 
    onChange: Function 
    error: string 
    required?: boolean 
} 

interface S { 
    value: string 
    isValid: boolean 
    somethingNew: string 
} 

class NameFieldContainer extends BaseComponent { 
    constructor(props: any) { 
     super(props); 

     this.state = { 
      value: '', 
      isValid: false, 
      somethingNew: 'Foo' 
     }; 

     this.aMethod(); 
    } 

    protected aMethod() { 
     this.setState({somethingNew: 'Bar'}); 
    } 

    public render() { 
     const somethingNew = this.state.somethingNew; 
     return (
      <div>{somethingNew}</div> 
     ); 
} 

export default NameFieldContainer; 

Jetzt Mein Compiler (und IDE) zeigt einige Probleme mit den neuen Eigenschaften state.somethingNew und props.required. Ich habe keine Ahnung, wie ich das ausweiten kann. Wie kann ich der BaseComponent beibringen, dass er die Interfaces vom NameFieldContainer benutzen muss?

Answer 1

Sie können die Intersection Type verwenden, um Ihre vorhandenen Schnittstellen für die Requisiten und den Zustand zu erweitern. Ihre BaseContainer würde so aussehen

class BaseContainer<PP, SS> extends React.Component<P & PP, S & SS> { 

} 

und Ihre konkrete Umsetzung, dass würden Sie

interface PExtended { 
    id: string 
    onChange: Function 
    error: string 
    required?: boolean 
} 

interface SExtended { 
    value: string 
    isValid: boolean 
    somethingNew: string 
} 

class NameFieldContainer extends BaseContainer<PExtended, SExtended> {...} 

verwenden Sie haben auch im Auge zu behalten, wenn die Zustandsfelder nicht optional sind (indem sie sie als value?:string erklärt) Sie müssen sie in setState({}) setzen.