如何在流中输入一个使用函数生成数据的高阶函数？答案

【问题标题】：How can I type in flow a high order function that takes a function to generate data?如何在流中输入一个使用函数生成数据的高阶函数？
【发布时间】：2021-02-05 04:50:37
【问题描述】：

我想使用泛型键入一个模拟查询的函数。为了给要使用的数据类型提供最大的灵活性（并避免返回相同的引用数据），此函数采用另一个函数来生成要返回的数据。因为这个函数可以返回任何数据类型，所以我不想将它限制为任何特定类型，但我也不想使用any。

我认为这可以通过泛型实现，但我所有正确键入它的尝试都失败了。到目前为止，这是我尝试过的：

//@flow
import { useState, useEffect } from 'react'

export const makeUseQuery = <T>(generateData: () => T) => () => {
  const [data, setData] = useState()
  const [isLoading, setIsLoading] = useState(true)
  useEffect(() => {
    const id = setTimeout(() => {
      setData(generateData())
      setIsLoading(false)
    }, 2500)
    return () => {
      clearTimeout(id)
    }
  }, [])
  return {
    data,
    isLoading,
    error: null,
  }
}

我从 flow 中得到的错误是我不能让泛型从范围中逃逸，但我不确定如何才能保证这种类型的安全。

【问题讨论】：

标签： flowtype

【解决方案1】：

也许是这样的？

import { useState, useEffect } from 'react'

type UseQueryResult<Response> = $ReadOnly<{|
  data: Response | void,
  isLoading: boolean,
  error: null,
|}>;

export const makeUseQuery = <Response>(
  generateData: () => Response
): (() => UseQueryResult<Response>) => 
(): UseQueryResult<Response> => {
  const [data, setData] = useState()
  const [isLoading, setIsLoading] = useState(true)
  useEffect(() => {
    const id = setTimeout(() => {
      setData(generateData())
      setIsLoading(false)
    }, 2500)
    return () => {
      clearTimeout(id)
    }
  }, [])
  return {
    data,
    isLoading,
    error: null,
  }
}

(try)

【讨论】：