javascript - FlowType 包装获取而不丢失默认类型注释

Question

我想做的是包装 fetch 函数来处理一些 fetch 样板，比如调用 .json() .

但问题是，如果我将 fetch 函数包装在一个带有我自己的注释的函数中，我会失去很多类型安全性，因为我的类型永远不会像那些默认情况下随 Flow 一起提供。

所以我尝试利用存在类型(*)和typeof让Flow保持默认注解

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

不幸的是，这给了我一些没有多大意义的类型错误

 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

有什么方法可以让它工作吗？

Answer 1

我能够用更大问题的一个更小的子集重现这个问题，我想我现在理解了这个问题，因为它与 fetch 本身完全无关。

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

上面会导致类似的错误，这是因为将 opts 传播到对象中可能会将 'POST' 重写为 null，这不是允许，因为它具有 string 类型。解决方案是传播到一个新对象中，而不是现有对象中。所以

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

会起作用。