如何获取React自定义Hook返回值类型用于TypeScript测试Mock？

我编写了如下React自定义Hook（TypeScript）：

type DataItem = {
    id: number
    title: string
}

const useDataItem = (uid: string) => {
    const {data, setData} = useState<DataItem>()
    const {loading, setLoading} = useState<boolean>(false)
    const {error, setError} = useState<number>()
    
   // ...do stuff

   return {data, loading, error}
}

（注：原代码存在两处笔误：type DataItem缺少=，DateItem应为DataItem，已修正）

在测试中，我通过以下方式Mock这个Hook：

const mockDataItem = {
    loading: false,
    error: undefined,
    data: { id: 1, title: 'test' }
}
jest.mock("../../hooks/useDataItem", () =>
  jest.fn(() => mockDataItem)
);

我希望获取该Hook返回值的类型，并将其应用到mockDataItem上，无需重新声明类型。请问这是否可行？如果可行，具体该如何操作？

当然可行，你可以用TypeScript内置的ReturnType<T>工具类型直接提取useDataItem的返回值类型，不用手动重复定义类型结构。

具体操作如下：

• 提取Hook返回值类型
  用ReturnType<typeof useDataItem>拿到useDataItem的返回值类型，存成一个类型别名（也可以直接使用）：

  type UseDataItemReturn = ReturnType<typeof useDataItem>;
  

• 为mock对象指定类型
  有两种简单方式：

  1. 声明变量时直接指定类型：

     const mockDataItem: UseDataItemReturn = {
         loading: false,
         error: undefined,
         data: { id: 1, title: 'test' }
     };
     

  2. 用as断言快速指定（适合不想单独定义类型别名的场景）：

     const mockDataItem = {
         loading: false,
         error: undefined,
         data: { id: 1, title: 'test' }
     } as ReturnType<typeof useDataItem>;
     

• 修正Mock代码
  原代码中mockUseDataItem是笔误，需改为mockDataItem：

  jest.mock("../../hooks/useDataItem", () =>
    jest.fn(() => mockDataItem)
  );
  

这么做的优势：无需重复编写类型结构，后续如果useDataItem的返回值结构变更，mock对象的类型会自动同步，避免出现类型不匹配的问题。

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