FlowType Wrapping Fetch ohne Standard-Typ Annotationen zu verlieren

Question

Was ich möchte, ist die fetch Funktion umwickeln mit einigen der fetch Boilerplate wie Anruf .json().

Das Problem ist, dass, wenn ich die Funktion fetch in einer Funktion mit meinen eigenen Anmerkungen umhüllen, ich eine Menge des Typs Sicherheit verliere, weil meine Typen nie so spezifisch sein werden, wie diejenigen, die mit Flow standardmäßig kommen.

So habe ich versucht, die Vorteile der existentielle Typen zu nehmen (*) und typeof fließen, um die Standard Anmerkungen zu machen halten

// Imported as f because importing as "fetch" 
// overwrites all of Flow's default type info about fetch 
import f from 'node-fetch' 

export const fetchJSON: typeof fetch = 
    (url: *, opts: *): * => f(url, opts).then(r => r.json()) 

export const post: typeof fetchJSON = (url: *, opts: *): * => fetchJSON(url, { 
    method: 'POST', 
    headers: { 'Content-Type': 'application/json' }, 
    ...opts 
}) 

das gab mir leider einige Art Fehler, die nicht viel Sinn

10: export const post: typeof fetchJSON = (url: *, opts: *): * => fetchJSON(url, { 
                       ^object literal 
11: method: 'POST', 
       ^^^^^^ string. This type is incompatible with 
824:  method?: ?MethodType; 
        ^^^^^^^^^^^ null. See lib: /private/tmp/flow/flowlib_22594590/bom.js:824 

x.js:10 
10: export const post: typeof fetchJSON = (url: *, opts: *): * => fetchJSON(url, { 
                       ^object literal 
12: headers: { 'Content-Type': 'application/json' }, 
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ object literal. This type is incompatible with 
822:  headers?: ?HeadersInit; 
        ^^^^^^^^^^^^ null. See lib: /private/tmp/flow/flowlib_22594590/bom.js:822 

x.js:10 
10: export const post: typeof fetchJSON = (url: *, opts: *): * => fetchJSON(url, { 
                       ^object literal 
12: headers: { 'Content-Type': 'application/json' }, 
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `Content-Type`. Property not found in 
822:  headers?: ?HeadersInit; 
        ^^^^^^^^^^^ Headers. See lib: /private/tmp/flow/flowlib_22594590/bom.js:822 


Found 3 errors 

gemacht hat

Gibt es eine Möglichkeit, dies zu funktionieren?

Answer 1

Ich konnte dies mit einer viel kleineren Teilmenge des größeren Problems reproduzieren, und ich denke, ich verstehe das Problem jetzt, weil es völlig unabhängig von fetch selbst ist.

// @flow 
const opts: RequestOptions = {} 
const test = { method: 'POST', headers: { 'Content-Type': 'application/json' }, ...opts } 

Die oben genannten Ursachen ähnliche Fehler, und es ist, weil opts in das Objekt verbreiten könnte 'POST' zu null umschreiben, was nicht erlaubt ist, weil es eine string Typ hat. Die Lösung besteht darin, sich in ein neues Objekt statt in das vorhandene zu verbreiten. Also

const test = { ...{ method: 'POST', headers: { 'Content-Type': 'application/json' } }, ...opts } 

wird funktionieren.