如何在React中使用相同的函数类型？

Question

https://github.com/apollographql/apollo-client/blob/4e9f370f262c171409037dae24fadccb61c35d13/packages/apollo-client/src/core/ObservableQuery.ts#L303

假设我要通过refetch函数作为组件上的道具，这就是我正在做的。

import { ApolloQueryResult } from "apollo-client"
interface MyQueryVariables{ ... }
interface MyQueryResult{ ... }

interface Props {
  refetch: (
    variables?: MyQueryVariables | undefined
  ) => Promise<ApolloQueryResult<MyQueryResult>>
}

我必须

1. 找到refetch函数类型定义
2. 导入所需的类型等。例如ApolloQueryResult
3. 像在ObservableQuery中一样编写refetch属性

，我认为必须有一种更简单的方法。

除了像我一样复制内容之外，您如何定义与prop相同的函数类型？

Answer 1

您可以使用typeof来获取某些对象的类型，包括现有功能。

例如

function refetch(variables?: TVariables): Promise<ApolloQueryResult<TData>>
// Somewhere in code
type refreshFuncType = typeof refetch; // Now refreshFuncType is of type (variables?: TVariables) => Promise<ApolloQueryResult<TData>>

interface Props {
    refetch: refreshFuncType
}

您不仅拥有function refresh类的方法refresh，还拥有ObservableQuery的方法。要提取方法类型，您应该像这样使用indexed access type

type refreshFuncType = ObservableQuery['refetch']; // Now refreshFuncType is of type (variables?: TVariables) => Promise<ApolloQueryResult<TData>>
// As ObservableQuery is generic you may provide specific type using ObservableQuery<type1, type2>

由于索引访问提供了类型，因此不再需要typeof关键字。