推断类型
在您的客户端中访问 API 类型通常很有用。为此,您可以推断 AppRouter
中包含的类型。
@trpc/server
导出以下辅助类型,以帮助从 @trpc/server
路由器导出的 AppRouter
推断这些类型
inferRouterInputs<TRouter>
inferRouterOutputs<TRouter>
推断输入和输出类型
假设我们有这个示例路由器
server.tsts
// @filename: server.tsimport {initTRPC } from '@trpc/server';import {z } from "zod";constt =initTRPC .create ();constappRouter =t .router ({post :t .router ({list :t .procedure .query (() => {// imaginary db callreturn [{id : 1,title : 'tRPC is the best!' }];}),byId :t .procedure .input (z .string ()).query ((opts ) => {// imaginary db callreturn {id : 1,title : 'tRPC is the best!' };}),create :t .procedure .input (z .object ({title :z .string (),text :z .string (), })).mutation ((opts ) => {// imaginary db callreturn {id : 1, ...opts .input };}),}),});export typeAppRouter = typeofappRouter ;
server.tsts
// @filename: server.tsimport {initTRPC } from '@trpc/server';import {z } from "zod";constt =initTRPC .create ();constappRouter =t .router ({post :t .router ({list :t .procedure .query (() => {// imaginary db callreturn [{id : 1,title : 'tRPC is the best!' }];}),byId :t .procedure .input (z .string ()).query ((opts ) => {// imaginary db callreturn {id : 1,title : 'tRPC is the best!' };}),create :t .procedure .input (z .object ({title :z .string (),text :z .string (), })).mutation ((opts ) => {// imaginary db callreturn {id : 1, ...opts .input };}),}),});export typeAppRouter = typeofappRouter ;
使用辅助程序,我们可以推断路由器的类型。以下示例展示了如何推断 post.create
过程的类型
client.tsts
// @filename: client.tsimport type {inferRouterInputs ,inferRouterOutputs } from '@trpc/server';import type {AppRouter } from './server';typeRouterInput =inferRouterInputs <AppRouter >;typeRouterOutput =inferRouterOutputs <AppRouter >;typePostCreateInput =RouterInput ['post']['create'];typePostCreateOutput =RouterOutput ['post']['create'];
client.tsts
// @filename: client.tsimport type {inferRouterInputs ,inferRouterOutputs } from '@trpc/server';import type {AppRouter } from './server';typeRouterInput =inferRouterInputs <AppRouter >;typeRouterOutput =inferRouterOutputs <AppRouter >;typePostCreateInput =RouterInput ['post']['create'];typePostCreateOutput =RouterOutput ['post']['create'];
推断 TRPCClientError
类型
推断 AppRouter
的错误类型也很有用
client.tsts
// @filename: client.tsimport {TRPCClientError } from '@trpc/client';import type {AppRouter } from './server';import {trpc } from './trpc';export functionisTRPCClientError (cause : unknown,):cause isTRPCClientError <AppRouter > {returncause instanceofTRPCClientError ;}async functionmain () {try {awaittrpc .post .byId .query ('1');} catch (cause ) {if (isTRPCClientError (cause )) {// `cause` is now typed as your router's `TRPCClientError`console .log ('data',cause .data );} else {// [...]}}}main ();
client.tsts
// @filename: client.tsimport {TRPCClientError } from '@trpc/client';import type {AppRouter } from './server';import {trpc } from './trpc';export functionisTRPCClientError (cause : unknown,):cause isTRPCClientError <AppRouter > {returncause instanceofTRPCClientError ;}async functionmain () {try {awaittrpc .post .byId .query ('1');} catch (cause ) {if (isTRPCClientError (cause )) {// `cause` is now typed as your router's `TRPCClientError`console .log ('data',cause .data );} else {// [...]}}}main ();