So schließen Sie einen Schlüssel von einer Schnittstelle in Typoskript

In Typoskript, können Sie kombinieren zwei interface-Typen, wie dieser

interface Foo {
    var1: string
}

interface Bar {
    var2: string
}

type Combined = Foo & Bar

Anstelle der Kombination von Tasten, ausschließen will ich die Schlüssel von einer Schnittstelle zur anderen. Gibt es trotzdem, Sie tun es in TypeScript?

Der Grund ist, ich habe eine HOC, die verwaltet, ein property-Wert für andere gewickelt Komponente wie folgt

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}
        />
      )
    }
}

Mit, dass ich schreiben kann,

const ValuedComponent = valueHOC(MyComponent)

dann

<ValuedComponent />

aber das problem ist, dass die zurückgegebene component type auch über die Requisiten, die Art von Komponente, so Typoskript Klagen und bitten mich um die value prop. Als Ergebnis, ich werde zu schreiben, so etwas wie

<ValuedComponent value="foo" />

Denen der Wert wird nicht verwendet, sowieso. Was ich hier will ist die Rückkehr einer Schnittstelle, ohne spezifische Tasten, ich will etwas davon haben

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

Dann die value wird nicht erforderlich sein, in der Komponente zurückgegeben. Ist es möglich, in Maschinenschrift, für jetzt?

  • Sie können überprüfen Pick<T, K keyof T>. Aber Sie können nicht wählen Sie die Dinge dynamisch.
InformationsquelleAutor Fang-Pen Lin | 2017-07-08
  1. 24

    In Maschinenschrift 2.8 Sie können nun Folgendes tun:

    interface Foo {
    attribute1: string;
    optional2?: string;
    excludePlease: string;
}

//Define Omit.  Can be defined in a utilities package
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>

//Use Omit to exclude one or more fields (use "excludePlease"|"field2"|"field3" etc to exclude multiple)
type Bar = Omit<Foo, "excludePlease">
const b: Bar = {
    attribute1: ''
};

    So, in Bezug auf Ihre Frage, das folgende könnte das sein, was Sie wollen: 

    export default function valueHOC<P> (
  Comp: React.ComponentClass<P> | React.StatelessComponent<P>
): React.ComponentClass<Omit<P, "value">> {
  return class WrappedComponent extends React.Component<Omit<P, "value">, State> {
    render () {
      return (
        <Comp
          {...this.props}
          value={this.state.value}
        />
      )
    }
}
    • Während dies funktioniert, es wird optionale Parameter erforderlich. Sie können dies tun, um zu verhindern, dass: stackoverflow.com/a/48216010/616589
    • Ich glaube nicht, diskutieren Sie die Genauigkeit der Antwort, aber das ist eine absurd-Runde die Häuser Weg, eine einfache Ende - es wird dauern, wer Lesen es einige nicht-triviale Menge an Zeit, um herauszufinden, gerade was die Hölle ist. Gibt es keine Logik, warum das typescript-team diesen Weg ging?
    • sorry, das ich vor kurzem bearbeitet, es zu vereinfachen und zu verbessern die Antwort, aber ich vergesse auch die vereinfachte Omit code in das Beispiel vereinfachen. Ist das jetzt besser?
    • Ich jammerte darüber, Typoskript, nicht deine Antwort, aber danke - ja, das ist etwas einfacher. Immer noch absolut verrückt, dass Sie uns direkt durch solche lächerlichen syntax, um etwas zu erreichen - einfach, ich habe Angst vor der Sprache, wenn Sie wirklich denken, diese Art der Sache ist OK.
    • Wäre interessant zu sehen, Beispiele von anderen typisierten Sprachen, wo dies behandelt wird besser 🙂
    • Dies scheint nicht gut zu funktionieren, wenn man die Requisiten Art wieder zusammen. 'Pick<OuterProps, Exclude<keyof OuterProps, "c">> & { c: number; } " ist nicht zuordenbar Typ 'OuterProps' typescriptlang.org/play/#code/...
    • offenbar gibt es bereits einen bug dazu: github.com/Microsoft/TypeScript/issues/28938

    InformationsquelleAutor AJP
  2. 1

    Es ist utility-Typen Bibliothek, hat Subtract zugeordnete Typ:

    import { Subtract } from 'utility-types';

type Props = { name: string; age: number; visible: boolean };
type DefaultProps = { age: number };

type RequiredProps = Subtract<Props, DefaultProps>;
//Expect: { name: string; visible: boolean; }
    InformationsquelleAutor Chintsu
  3. 0

    Können Sie nicht entfernen, die Eigenschaften von bereits vorhandenen Schnittstellen. Auch versucht zu erweitern, bestehende Schnittstelle mit der Schnittstelle, die value Eigenschaft als set optional, wird ein Fehler zurückgegeben.

    Um dieses Problem zu vermeiden, ändern Sie die Testungen der Ziel-Komponente, so value - Eigenschaft ist optional.

    z.B.

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

    - und dann-Komponente erzeugt wird, wenn mit Hoher Ordnung Funktion

    const valuedComponent = valueHOC(MyComponent);

    fragt nicht nach value prop.

    InformationsquelleAutor Michał Pietraszko
Schreibe einen Kommentar