在 Typescript 中将类型作为参数传递答案

【问题标题】：Passing types as arguments in Typescript在 Typescript 中将类型作为参数传递
【发布时间】：2022-01-12 11:47:45
【问题描述】：

我编写了一个自定义钩子来帮助我不为某些 fetch 调用重复代码。它看起来像这样：

export const useCustomQuery = ({ endpoint, body, dataPoint }: args) => {
    const [data, setData] = useState()
    useEffect(() => {
        fetch(`http://localhost:4000/${endpoint}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body,
        })
            .then((res) => res.json())
            .then((res) => {
                if (dataPoint) {
                    setData(JSON.parse(res.data[dataPoint]))
                }
            })
    }, [endpoint, body, dataPoint])

    return { data }
}

但我收到了一些抱怨数据类型的 TS 错误。是否可以将类型作为参数传递，因为每个调用钩子的组件可能不同？或者解决这个问题的最佳方法是什么？

【问题讨论】：

是的，您可以使用 generic type parameter 然后传递类型参数或允许 TypeScript 推断它（如果可以的话）。 （评论而不是回答，因为我认为有一个规范问题，我们可以指出这个问题......）
轰隆隆。泛型。完美，谢谢兄弟
离题。这个实现有很多问题，因为您不会取消在开发环境中很可能不会观察到但肯定会在生产环境中影响您的状态更新。考虑在响应返回之前已卸载组件。或者更糟糕的是，如果后续请求出现问题。
以这个问题为例stackoverflow.com/questions/64393441/…（顺便说一句，它使用泛型）。
@YuryTarabanko 是的，我需要添加错误处理等

标签： javascript reactjs typescript react-hooks react-custom-hooks

【解决方案1】：

是的，您可以使用泛型类型，这是一个示例。泛型函数的类型和非泛型函数的类型一样，类型参数在前，与函数声明类似，在不同组件中调用钩子时需要指定类型，类型会以这种方式推断。

function identity<Type>(arg: Type): Type {
  return arg;
}
 
let myIdentity: <Type>(arg: Type) => Type = identity;

您可以参考这个link了解更多信息。

【讨论】：

【解决方案2】：

在这种情况下，您可以使用泛型。你可以这样做：

export const useCustomQuery = <T,>({ endpoint, body, dataPoint }: args) => {
    const [data, setData] = useState<T>()
    ...
}

这样，当你调用钩子 useCustomQuery 时，你会给出一个类型 T，它参数化了 data 的类型，如下所示：

useCustomQuery<MyType>({...})

【讨论】：