0Pricing
TypeScript Academy · Aula

Inferência de Tipos entre Cliente e Servidor

Obtenha clientes totalmente tipados sem geração de código.

Inferência de Tipos entre Cliente e Servidor é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 4 aulas no total.

Compartilhando o tipo do roteador

O client obtém segurança de tipos ao importar o tipo do roteador do servidor. Essa é uma importação somente de tipo: nada do servidor é executado no client; apenas o contrato estático atravessa essa fronteira.

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

Criando um client tipado

Use createTRPCClient — ou a variante proxy — parametrizado por AppRouter. O objeto client então espelha a estrutura do roteador do servidor, com autocompletar completo para cada procedimento.

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

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

Chamando procedimentos

As chamadas espelham a árvore do roteador. Um procedimento aninhado, user.byId, é acessado como client.user.byId, e você chama .query ou .mutate nele. As entradas e saídas são tipadas a partir do servidor.

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

Entradas inferidas

O client conhece a entrada de cada procedimento a partir do esquema do servidor. Passar uma estrutura incorreta causa um erro de compilação antes mesmo de você executar a aplicação.

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

Saídas inferidas

Os tipos de retorno também são propagados. O valor resolvido de uma query é exatamente o que o resolvedor do servidor retorna, portanto o código posterior é totalmente verificado.

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

Operações mutation no client

As mutations são chamadas com .mutate. A mesma inferência se aplica: a entrada é validada pelo tipo do esquema, e a saída é tipada a partir do resolvedor.

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

Fluxo da inferência

Acompanhe como um tipo percorre o sistema: um esquema zod no servidor infere o tipo da entrada, o retorno do resolvedor infere o tipo da saída, typeof appRouter captura ambos em AppRouter, e o client mapeia esse tipo para métodos chamáveis. Uma alteração se propaga automaticamente.

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

Inferindo tipos auxiliares

O tRPC expõe auxiliares para extrair tipos de entrada e saída e reutilizá-los, por exemplo, em componentes React. inferRouterInputs e inferRouterOutputs fornecem esses mapas a partir de AppRouter.

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

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

Garantia contra divergências

Como o client é tipado a partir do tipo atual do roteador, servidor e client não podem divergir. Renomeie um procedimento ou altere uma entrada, e o client não compilará até que você atualize a chamada. O compilador é seu teste de contrato.

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

Agrupamento e conexões

A matriz links configura o transporte. httpBatchLink agrupa várias chamadas feitas no mesmo ciclo em uma única requisição HTTP, reduzindo as idas e voltas. Essa é uma otimização de execução que não afeta os tipos.

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

Ponta a ponta na prática

O resultado é que você chama client.user.byId.query(...) como uma função local, com autocompletar para as entradas, argumentos verificados e um resultado tipado, tudo derivado do código do servidor sem arquivos gerados. Essa é a segurança de tipos de ponta a ponta proporcionada pela inferência.

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

Verificação rápida

Teste sua compreensão da inferência entre client e servidor.

Recapitulação

Você consumiu uma API tRPC com segurança de tipos completa.

  • Importe AppRouter como uma importação somente de tipo.
  • createTRPCClient<AppRouter> espelha a árvore do roteador.
  • As entradas e saídas são inferidas a partir dos esquemas e resolvedores do servidor.
  • Client e servidor não podem divergir; o compilador aplica o contrato.

Próximo: contexto e middleware para autenticação.

Perguntas Frequentes

A aula “Inferência de Tipos entre Cliente e Servidor” é grátis?

Sim — o texto completo de “Inferência de Tipos entre Cliente e Servidor” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 4 aulas no total.

O que vou aprender em “Inferência de Tipos entre Cliente e Servidor”?

Obtenha clientes totalmente tipados sem geração de código. Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar TypeScript Academy?

Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Inferência de Tipos entre Cliente e Servidor”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de TypeScript Academy?

Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. A Arquitetura tRPC
  2. Definindo Roteadores e Procedimentos
  3. Inferência de Tipos entre Cliente e Servidor
  4. Middleware e Contexto
← Voltar para TypeScript Academy