如何提取TRPC useQuery返回data的TypeScript类型？

直接使用ReturnType<typeof trpc.promotions.getPromotion.useQuery>['data']得到unknown，是因为useQuery是泛型函数，TypeScript无法自动推断其泛型参数，导致返回类型中的data被标记为unknown。以下是两种可靠的解决方法：

方法一：从服务端Router导出类型并使用TRPC工具类型提取 #

1. 服务端导出Router类型
   在服务端的TRPC Router定义文件中，导出整个AppRouter的类型：

   // server/trpc/index.ts
   import { router } from './trpc';
   import { promotionsRouter } from './router/promotions';
   
   export const appRouter = router({
     promotions: promotionsRouter,
   });
   
   // 导出供客户端使用的类型
   export type AppRouter = typeof appRouter;
   

2. 客户端提取Query返回类型
   在客户端代码中，使用TRPC提供的inferQueryOutput工具类型，从AppRouter中提取目标Query的返回类型：

   // client/types.ts
   import type { AppRouter } from '@/server/trpc';
   import type { inferQueryOutput } from '@trpc/server';
   
   // 提取getPromotion接口的返回类型
   export type Promotion = inferQueryOutput<AppRouter['promotions']['getPromotion']>;
   

   之后在任意组件中，直接导入Promotion类型即可复用：

   import type { Promotion } from '@/client/types';
   
   interface PromotionCardProps {
     promotion: Promotion;
   }
   

方法二：直接从客户端TRPC实例推导类型 #

如果客户端的TRPC实例是基于AppRouter创建的，也可以直接从实例中推导类型：

import type { inferQueryOutput } from '@trpc/server';
import { trpc } from '@/client/trpc';

type Promotion = inferQueryOutput<typeof trpc.promotions.getPromotion>;

局部复用的简便方法 #

如果仅在某个组件局部需要复用该类型，可以直接提取已有的promotion变量类型：

const { data: promotion } = trpc.promotions.getPromotion.useQuery({ id: promotionId });
// 使用NonNullable排除undefined，得到服务端返回的真实类型
type Promotion = NonNullable<typeof promotion>;

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