Wie erweitere ich ein Array mit dem Flow-Type-Checker?

Question

In einem React-Projekt spiele ich mit der MobX-Bibliothek. Eine Sache, die Sie tun können, ist Ihren Code zu schreiben, wie Sie mit den Primitiven arbeiten, aber unter der Haube MobX macht einige beobachtbare Magie. Ich benutze auch Flow in diesem Projekt und finde es schwierig, die richtige Syntax für die beobachtbaren MobX-Arrays zu finden, die mindestens zwei zusätzliche Methoden, replace und peek, haben.

Die TS-Datei für diesen Code ist ziemlich in die Tiefe und ich bin ziemlich neu zu tippen. Die TS-Datei finden Sie hier:

https://github.com/mobxjs/mobx/blob/master/src/types/observablearray.ts

Keine der Syntax, die ich im Flow versucht haben, funktionieren wird, ist es wahrscheinlich alle ziemlich naiv/unwissend.

interface ObservableArray { 
    join(str: string): string; 
    replace(arr: Array<any>): ObservableArray; 
    map(mapFunction: Function): Array<any>; 
    reduce(reducerFunction: Function, initialValue: any): any; 
    peek(): Array<any>; 
} 

type MobxArray = ObservableArray; 

oder

interface ObservableArray extends Array { 
    peek(): Array<any>; 
    replace(arr: Array<any>): MobxArray<any>; 
} 

type MobxArray = ObservableArray; 

Die meiste Zeit ich diesen Fehler "Expected polymorphen Typ anstelle des Typs 'MobxArray'." Ich erhalte diese Störung, wenn ich versuche, die Requisiten für eine Komponente zu erklären:

type MyComponentProps = { 
    myArray: MobxArray<string>; 
}; 

const MyComponent = observer(({ myArray }: MyComponentProps) => (
    <div>{ ... code ... }</div> 
)); 

Answer 1

ich wahrscheinlich diese Lösung hatte schon vor langer Zeit, aber meine ESLint Config beschwert und ich wahrscheinlich nie die Ergebnisse dieser geprüft fließen, weil des nicht-undef-Fehlers.

interface MobxArray<V> extends Array<V> { 
    replace(arr: Array<V>): MobxArray<V>; 
    peek(): Array<V>; 
} 

Answer 2

Ich weiß nicht, ob die automatische Konvertierung von Typoskript .d.ts Dateien ist möglich zu fließen, aber wenn Sie das Paket aussehen in sich selbst finden Sie alle Schnittstellen in .d.ts Dateien im lib/Verzeichnis, das erleichtert die Konvertierung wahrscheinlich (das sind nicht auf Github, wie sie während des Build erzeugt werden)

Edit: vielleicht können Sie sogar direkt verweisen auf mobx/lib/index.d.ts, die Flow-Syntax für Schnittstellen scheint ziemlich ähnlich.