0Pricing
TypeScript Academy · Lección

Inferencia de tipos entre cliente y servidor

Obtenga clientes completamente tipados sin generar código.

Inferencia de tipos entre cliente y servidor es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

Compartir el tipo del router

El cliente obtiene seguridad de tipos al importar el tipo del router del servidor. Se trata de una importación exclusiva de tipos: nada del servidor se ejecuta en el cliente; solo atraviesa el límite el contrato estático.

import type { AppRouter } from '../server/router';
// type-only import - erased at build time

Creación de un cliente con tipos

Utilice createTRPCClient (o la variante proxy) parametrizado con AppRouter. El objeto cliente reflejará entonces la estructura del router del servidor, con autocompletado completo para cada procedimiento.

import { createTRPCClient, httpBatchLink } from '@trpc/client';

const client = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: 'http://localhost:3000' })],
});

Llamada a procedimientos

Las llamadas reflejan el árbol del router. Se accede a un procedimiento anidado como user.byId mediante client.user.byId, y se llama a .query o .mutate en él. Las entradas y salidas se tipan a partir del servidor.

const user = await client.user.byId.query({ id: 1 });
// user is typed exactly as the server resolver returns

Entradas inferidas

El cliente conoce la entrada de cada procedimiento a partir del esquema del servidor. Pasar una estructura incorrecta produce un error de compilación antes incluso de ejecutar la aplicación.

await client.user.byId.query({ id: 1 });   // ok
// await client.user.byId.query({ id: 'x' }); // error: id must be number
// await client.user.byId.query({});          // error: id is required

Salidas inferidas

Los tipos de retorno también se transmiten. El valor resuelto de una consulta es exactamente lo que devuelve el resolver del servidor, por lo que el código posterior se comprueba por completo.

const u = await client.user.byId.query({ id: 1 });
const name: string = u.name; // ok if server returns name: string

Mutaciones en el cliente

Las mutaciones se llaman con .mutate. Se aplica la misma inferencia: la entrada se valida mediante el tipo del esquema y la salida se tipa a partir del resolver.

const created = await client.user.create.mutate({ name: 'Bea' });
// created is typed from the create resolver's return

Flujo de inferencia

Trace cómo viaja un tipo: un esquema de zod en el servidor infiere el tipo de entrada, el retorno del resolver infiere el tipo de salida, typeof appRouter captura ambos en AppRouter y el cliente asigna ese tipo a métodos invocables. Un solo cambio se propaga automáticamente.

// schema -> input type
// resolver -> output type
// appRouter -> AppRouter (both captured)
// client<AppRouter> -> typed calls

Inferencia de tipos auxiliares

tRPC ofrece auxiliares para extraer tipos de entrada y salida y reutilizarlos, por ejemplo, en componentes de React. inferRouterInputs y inferRouterOutputs proporcionan esos mapas a partir de AppRouter.

import type { inferRouterOutputs } from '@trpc/server';

type Outputs = inferRouterOutputs<AppRouter>;
type User = Outputs['user']['byId'];

Garantía de ausencia de desajustes

Como el cliente se tipa a partir del tipo actual del router, el servidor y el cliente no pueden quedar desincronizados. Cambie el nombre de un procedimiento o modifique una entrada y el cliente dejará de compilar hasta que actualice la llamada. El compilador es la prueba del contrato.

// Server renames user.byId -> user.find
// client.user.byId becomes a type error immediately

Agrupación de solicitudes y enlaces

El arreglo links configura el transporte. httpBatchLink agrupa varias llamadas realizadas en el mismo ciclo en una única solicitud HTTP, lo que reduce los viajes de ida y vuelta. Se trata de una optimización durante la ejecución que no afecta a los tipos.

links: [httpBatchLink({ url: '/trpc' })]
// Several .query calls in one tick -> one request

Extremo a extremo en la práctica

El resultado es que puede llamar a client.user.byId.query(...) como si fuera una función local, con autocompletado para las entradas, argumentos comprobados y un resultado tipado, todo derivado del código del servidor y sin archivos generados. Así se obtiene seguridad de tipos de extremo a extremo mediante inferencia.

const u = await client.user.byId.query({ id: 7 });
console.log(u.name); // fully typed, no codegen

Comprobación rápida

Compruebe su comprensión de la inferencia entre cliente y servidor.

Resumen

Ha consumido una API de tRPC con seguridad de tipos completa.

  • Importe AppRouter mediante una importación exclusiva de tipos.
  • createTRPCClient<AppRouter> refleja el árbol del router.
  • Las entradas y salidas se infieren a partir de los esquemas y resolvers del servidor.
  • El cliente y el servidor no pueden quedar desincronizados; el compilador aplica el contrato.

Siguiente: contexto y middleware para la autenticación.

Preguntas frecuentes

¿La lección «Inferencia de tipos entre cliente y servidor» es gratis?

Sí — el texto completo de «Inferencia de tipos entre cliente y servidor» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Inferencia de tipos entre cliente y servidor»?

Obtenga clientes completamente tipados sin generar código. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar TypeScript Academy?

No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Inferencia de tipos entre cliente y servidor»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?

Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. La arquitectura de tRPC
  2. Definición de routers y procedimientos
  3. Inferencia de tipos entre cliente y servidor
  4. Middleware y contexto
← Volver a TypeScript Academy