0Pricing
tRPC End-to-End Type Safe APIs · Lezione

Configurare il primo progetto tRPC

Segua la procedura per installare tRPC, creare un router e collegare un client per effettuare la prima chiamata type-safe.

Configurare il primo progetto tRPC è una lezione tRPC End-to-End Type Safe APIs gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento tRPC End-to-End Type Safe APIs, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso tRPC End-to-End Type Safe APIs include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

What We Are Building

You know what tRPC is and why type safety matters. Now you'll set up a real project and make your first end-to-end type-safe call.

Installing the Packages

tRPC ships as separate server and client packages. Install them alongside Zod for validation.

npm install @trpc/server @trpc/client zod

Initializing tRPC

Create one t object with initTRPC.create() — everything else (router, procedures) is built from it.

import { initTRPC } from "@trpc/server";

const t = initTRPC.create();

export const router = t.router;
export const publicProcedure = t.procedure;

Creating a Router

A router groups procedures. Here's a minimal one exposing a single greeting query.

export const appRouter = router({
  hello: publicProcedure.query(() => {
    return "Hello tRPC";
  }),
});

Exporting the Router Type

The core trick: export only the router's type, not its code. The client learns the full API shape with zero codegen.

export type AppRouter = typeof appRouter;

Serving the Router

Attach your router to an HTTP server using a tRPC adapter — here, the standalone createHTTPServer.

import { createHTTPServer } from "@trpc/server/adapters/standalone";

createHTTPServer({ router: appRouter }).listen(3000);

Creating the Client

The client imports the AppRouter type to unlock full autocomplete and type checking against your server.

import { createTRPCClient, httpBatchLink } from "@trpc/client";
import type { AppRouter } from "./server";

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

Making the First Call

Call the procedure as if it were a local typed function — that's the whole point of tRPC.

const greeting = await client.hello.query();
console.log(greeting); // "Hello tRPC"

Type Safety in Action

Type safety in action: rename hello on the server and the client call becomes a compile error instantly — no runtime surprise.

Project Structure

A common project layout: server/trpc.ts for the t object, server/router.ts for procedures, and client/index.ts for the typed client.

Adding Inputs

Most procedures take input. Validate it with Zod and that input type flows to the client automatically.

greet: publicProcedure
  .input(z.object({ name: z.string() }))
  .query(({ input }) => "Hi " + input.name),

Quick Check

Test your setup knowledge.

Recap

Recap: you installed the tRPC packages, built a router and exported its type, and made a typed client call — a full end-to-end type-safe pipeline.

Domande Frequenti

La lezione «Configurare il primo progetto tRPC» è gratuita?

Sì — il testo completo di «Configurare il primo progetto tRPC» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso tRPC End-to-End Type Safe APIs, passa a CoddyKit PRO. Il corso tRPC End-to-End Type Safe APIs include 4 lezioni in totale.

Cosa imparerò in «Configurare il primo progetto tRPC»?

Segua la procedura per installare tRPC, creare un router e collegare un client per effettuare la prima chiamata type-safe. Eserciti tRPC End-to-End Type Safe APIs con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare tRPC End-to-End Type Safe APIs?

Non è richiesta alcuna esperienza precedente. tRPC End-to-End Type Safe APIs su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Configurare il primo progetto tRPC»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione tRPC End-to-End Type Safe APIs?

Sì. Ogni lezione tRPC End-to-End Type Safe APIs include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Che cos'è tRPC?
  2. Il potere della type safety
  3. Panoramica dei concetti fondamentali di tRPC
  4. Configurare il primo progetto tRPC
← Torna a tRPC End-to-End Type Safe APIs