React中如何复用其他模块的函数类型？以Apollo Client的refetch为例

不用手动复制粘贴类型定义，你可以直接从Apollo Client的ObservableQuery类型中提取refetch方法的类型，这样既能保证类型完全匹配，又能避免重复代码。

具体步骤如下：

1. 首先导入所需的基础类型：

import { ObservableQuery, ApolloQueryResult } from "@apollo/client";

2. 定义你的查询变量和结果类型（和之前的实现一致）：

interface MyQueryVariables {
  // 你的变量定义
}

interface MyQueryResult {
  // 你的查询结果定义
}

3. 通过类型索引提取ObservableQuery上refetch方法的类型：

// 直接从ObservableQuery中获取refetch的类型
type RefetchFunction = ObservableQuery<MyQueryResult, MyQueryVariables>['refetch'];

4. 最后在组件Props中使用这个提取好的类型：

interface Props {
  refetch: RefetchFunction;
}

这样做的好处很明显：

• 完全复用Apollo Client官方定义的类型，不会出现手动编写导致的类型不匹配问题
• 如果后续Apollo Client更新了refetch的类型签名，你的代码会自动同步，无需手动修改

另外补充一点：如果你是从useQuery hook中获取的refetch函数，它的类型本来就和ObservableQuery['refetch']完全一致，所以这样定义的Props可以完美接收这个函数。

内容的提问来源于stack exchange，提问作者kukrt