使用时键入参数

Question

我正在尝试构建一个通用工具，以处理对 react query query usequery 在我的应用程序中请求，并使用Typescript构建此内容，以便正确键入数据。

在父组件中，用例将是这样的：

const queryResult = useQuery<MyResponseType, Error>('whatever');

return (
  <ReactQueryLoader useQueryResult={queryResult}>
    {data => {
      // Data should be of MyResponseType type, but is unknown
      return <pre>{JSON.stringify(data, null, 2)}</pre>;
    }}
  </ReactQueryLoader>
);

我尝试将此reactQueryloader定义为：

import React from "react";
import { UseQueryResult } from "react-query";

import { Loading } from "./Loading";

interface ReactQueryLoaderProps {
  useQueryResult: UseQueryResult<unknown, Error>;
  handleError?: (error: Error) => void;
  children: (data: unknown) => JSX.Element;
}

export const ReactQueryLoader = ({
  useQueryResult,
  handleError = error => {
    console.error(error);
    throw new Error(error.message);
  },
  children,
}: ReactQueryLoaderProps): null | JSX.Element => {
  if (useQueryResult.isError) {
    handleError(useQueryResult.error);
    return null;
  }

  if (useQueryResult.isLoading) {
    return <Loading />;
  }

  return children(useQueryResult.data);
};

但是，当我检查传递给孩子的 data 时，而不是作为预期响应数据的类型，这是未知的。我很难做到这一点，作为对打字稿中低级理解的人。我以为我可以应用与，但我不知道在这种情况下如何做。

我尝试了一下：

interface ReactQueryLoaderProps {
  // ...
  children: <T extends unknown>(data: T) => JSX.Element;
}

但是在父元素中得到了这个：

(parameter) data: T extends unknown

我也尝试了：

interface ReactQueryLoaderProps {
  useQueryResult:  UseQueryResult<T extends unknown, Error>;

但这引发了两个错误：

• 在t：下找不到姓名't'。
• 在逗号下：'？'？预期。

这可以做到吗？

Answer 1

ReactQueryLoader 功能在这里需要通用，以及Props类型。

看起来可能是这样的：

interface ReactQueryLoaderProps<T extends UseQueryResult<unknown, Error>> {
  useQueryResult: T;
  handleError?: (error: Error) => void;
  children: (data: T['data']) => JSX.Element;
}

此处

export function ReactQueryLoader<T extends UseQueryResult<unknown, Error>>({
  useQueryResult,
  handleError,
  children,
}: ReactQueryLoaderProps<T>): null | JSX.Element {
  //...
}

ReactQueryLoader 现在是一个通用函数，可将查询结果类型捕获为 t ，并将其传递给通用props类型 reactqueryloaderProps 。

ReactQueryLoaderProps 然后将该类型用作 usequeryResult 的类型，然后从该类型中从该类型中拉出 ['data'] 属性，用于<代码>儿童功能参数。

See playground