Wie ein Schlüssel von einer Schnittstelle in Typoskript

Question

In Typoskript auszuschließen, zwei Schnittstellentypen wie diese

interface Foo { 
    var1: string 
} 

interface Bar { 
    var2: string 
} 

type Combined = Foo & Bar 

Statt der Kombination Tasten kombinieren, möchte ich Schlüssel von einer Schnittstelle zur anderen auszuschließen. Gibt es das überhaupt in TypeScript?

Der Grund dafür ist, ich habe eine HOC, die für andere gewickelte Komponenten wie diese

export default function valueHOC<P> (
    Comp: React.ComponentClass<P> | React.StatelessComponent<P> 
): React.ComponentClass<P> { 
    return class WrappedComponent extends React.Component<P, State> { 
    render() { 
     return (
     <Comp 
      {...this.props} 
      value={this.state.value} 
     /> 
    ) 
    } 
} 

Damit ich

<ValuedComponent /> 

dann

einen Eigenschaftswert schafft

const ValuedComponent = valueHOC(MyComponent) 

schreiben

aber das Problem ist, der zurückgegebene Komponententyp verwendet auch den Requisitentyp von gegebener Komponente, also TypeScr ipt wird sich beschweren und mich bitten, die value prop bereitzustellen. Als Ergebnis muss ich etwas schreiben wie

Welche der Wert wird sowieso nicht verwendet werden. Was ich hier will eine Schnittstelle ohne spezielle Tasten zurückzukehren, möchte ich so etwas wie dieses dann

React.ComponentClass<P - {value: string}> 

haben die value nicht in der zurückgegebenen Komponente benötigt werden. Ist es in TypeScript jetzt möglich?

Answer 1

Sie können Eigenschaften von bereits vorhandenen Schnittstellen nicht entfernen. Auch wenn Sie versuchen, die vorhandene Schnittstelle mit der Schnittstelle value zu erweitern, die als optional festgelegt ist, wird ein Fehler zurückgegeben.

Um dieses Problem zu vermeiden, ändern Sie die Typisierung der Zielkomponente, sodass die Eigenschaft value optional ist.

z.B.

// ... 
class MyComponent extends React.Component<{value?: string}, State> { 
// ... 
} 

und dann erzeugt, wenn Komponente Funktion höherer Ordnung mit

const valuedComponent = valueHOC(MyComponent); 

nicht für value prop fragen.