TypeScript Academy · Lektion

tRPC-arkitekturen

Så eliminerar tRPC duplicering av API-scheman.

Lektion 1 av 413 steg

tRPC-arkitekturen är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Problemet med typsäkerhet från ände till ände

I en typisk webbapp definierar servern ett API och klienten anropar det. Det är svårt att hålla deras typer synkroniserade: ändra ett fält på servern så går klienten i tysthet sönder vid körning. tRPC löser detta genom att dela typer direkt, utan kodgenerering.

// Server: returns { id: number; name: string }
// Client: must know that shape exactly
// Without sync: runtime errors when they drift

Vad tRPC är

tRPC är ett bibliotek för att bygga fullständigt typade API:er i TypeScript. Servern definierar procedurer och klienten anropar dem som om de vore lokala funktioner, med fullständig automatisk komplettering och typkontroll som härleds från serverkoden.

// Client call looks like a local function:
// const user = await client.user.byId.query(1);
// user is typed automatically from the server

Ingen kodgenerering

Till skillnad från arbetsflöden med GraphQL eller OpenAPI behöver tRPC inget steg för kodgenerering. Det finns ingen schemfil att kompilera och ingen genererad klient. Typerna flödar från server till klient enbart genom TypeScript-inferens vid kompilering.

// No .graphql files, no generated SDK
// Just import a type from the server package

Routern är kontraktet

Routern är tRPC:s kärna. Den består av ett träd av procedurer (queries och mutations). Routerobjektet på servern, och särskilt dess infererade typ, är den enda sanningskällan som delas med klienten.

// appRouter (server) defines every procedure
// type AppRouter = typeof appRouter is the contract

Hur typer delas

Servern exporterar endast routerns typ, inte implementationen. Klienten importerar typen och använder den för att typa en proxiklient. Ingen serverkod skickas till webbläsaren, utan endast typer, som tas bort vid byggtillfället.

// server.ts
export type AppRouter = typeof appRouter;

// client.ts
import type { AppRouter } from '../server';

Queries och mutationer

Procedurer finns i två huvudvarianter. En query läser data och är vanligtvis idempotent. En mutation ändrar data. Skillnaden motsvarar cachelagring och HTTP-semantik och påverkar hur klienten anropar dem.

// client.user.list.query()      -> read
// client.user.create.mutate(...) -> write

Runtime kontra typer

tRPC har två lager. Vid runtime är anropen JSON över HTTP och hanteras av en adapter. Vid kompilering gör den delade typen AppRouter varje anrop fullständigt typkontrollerat. Runtime-lagret är tunt; typtryggheten är det värdefulla.

// Runtime: POST /trpc/user.byId  body: {"input":1}
// Types: client.user.byId.query(1) is checked end to end

Varför typinferens slår kodgenerering

Eftersom typerna härleds finns det inget synksteg att glömma. Redigera en procedur så återspeglas ändringen omedelbart i klienten, med röda vågiga understrykningar där anropen inte längre stämmer. Återkopplingen är omedelbar och finns direkt i editorn.

// Add a required input field on the server
// -> every client call missing it becomes a type error

Var tRPC passar in

tRPC passar utmärkt i fullstack-monorepon i TypeScript där klient och server delar kodbas, till exempel i Next.js-appar. Det är inte avsett för publika API:er som används av andra språk; för sådana behövs fortfarande ett språkoberoende schema som OpenAPI eller GraphQL.

// Great: Next.js app, shared types, internal API
// Not ideal: public API for non-TS consumers

Helhetsbilden

Flödet är följande: definiera procedurer i en router, exportera routertypen, koppla in en HTTP-adapter och skapa en typad klient från typen. Varje anrop kontrolleras mot serverkontraktet utan någon genererad kod. I nästa lektion bygger vi varje del.

// Roadmap:
// 1. initTRPC + procedures + appRouter
// 2. export AppRouter, create typed client
// 3. context + middleware for auth

Lita på kompilatorn

Perspektivförändringen är denna: API-kontraktet finns i typer som upprätthålls av kompilatorn, inte enbart i dokumentation eller validering vid körning. Om koden kompilerar är klient och server överens. Det är detta garantin om ”end-to-end type safety” innebär.

// If client.ts compiles, it matches the current server.

Snabb kontroll

Testa dina kunskaper om tRPC-arkitekturen.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du har lärt dig tRPC-modellen.

Routern är kontraktet; dess typ är den enda sanningskällan.
Servern exporterar endast typen AppRouter, inte kod.
Queries läser och mutationer skriver; runtime är JSON över HTTP.
Typtryggheten kommer från inferens, utan något kodgenereringssteg.

Nästa steg: definiera routrar och procedurer.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 101
Lektioner: 352

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”tRPC-arkitekturen” gratis?

Ja – hela texten till ”tRPC-arkitekturen” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”tRPC-arkitekturen”?

Så eliminerar tRPC duplicering av API-scheman. Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?

Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”tRPC-arkitekturen”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?

Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till TypeScript Academy