TypeScript Academy · Lektion

Översikt över typsäker tRPC-klient

Se hur tRPC uppnår typsäkerhet från klient till server

Lektion 4 av 413 steg

Översikt över typsäker tRPC-klient är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 4 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.

Välkommen

tRPC möjliggör typsäkerhet från server till klient i hela applikationen utan kodgenerering.

Vad är tRPC

tRPC låter dig anropa serverfunktioner från klienten med full typsäkerhet. Ingen OpenAPI-specifikation, ingen codegen — bara TypeScript.

Definition av server-router

Definiera typade procedurer på servern med tRPC-routrar.
import { initTRPC } from '@trpc/server';
const t = initTRPC.create();
const appRouter = t.router({
  getUser: t.procedure.input(z.number()).query(({ input }) => db.getUser(input)),
});

Typinferens

Exportera routertypen så att den kan användas på klienten.
export type AppRouter = typeof appRouter;

Klientkonfiguration

Skapa en typad tRPC-klient med serverns routertyp.
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
const trpc = createTRPCProxyClient<AppRouter>({
  links: [httpBatchLink({ url: '/api/trpc' })],
});

Typade klientanrop

Anropa serverprocedurer från klienten med full autokomplettering.
const user = await trpc.getUser.query(1);
// user is typed as the return type of getUser

Indatavalidering med Zod

Använd Zod-scheman som indatavalidatorer för tRPC.
t.procedure.input(z.object({ name: z.string(), email: z.string().email() })).mutation(...)

Mutationer

Definiera mutationer för operationer som ändrar data.
const router = t.router({
  createUser: t.procedure.input(CreateUserSchema).mutation(({ input }) => db.create(input)),
});

Integrering med React Query

tRPC integreras med React Query för datahämtning med full typinferens.
const { data: user } = trpc.getUser.useQuery(1);
// data is typed automatically

Felhantering i tRPC

tRPC tillhandahåller typade fel med TRPCError.
import { TRPCError } from '@trpc/server';
if (!user) throw new TRPCError({ code: 'NOT_FOUND', message: 'User not found' });

tRPC jämfört med REST och GraphQL

tRPC passar bäst för fullstackprojekt i TypeScript. REST och GraphQL är bättre för publika API:er eller API:er mellan olika språk.

Snabbtest

Hur uppnår tRPC typsäkerhet mellan server och klient?

Sammanfattning

Översikt över en typsäker tRPC-klient: du har bemästrat de viktigaste koncepten och mönstren.
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

Vanliga frågor

Är lektionen ”Översikt över typsäker tRPC-klient” gratis?

Ja – hela texten till ”Översikt över typsäker tRPC-klient” 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 ”Översikt över typsäker tRPC-klient”?

Se hur tRPC uppnår typsäkerhet från klient till server 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 4 av 4.

Hur lång tid tar lektionen ”Översikt över typsäker tRPC-klient”?

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

  1. Typa fetch-svar med generiska wrappers
  2. Validering vid körning med Zod
  3. OpenAPI-kodgenerering: automatiskt genererade typer
  4. Översikt över typsäker tRPC-klient
← Tillbaka till TypeScript Academy