tRPC für TypeScript: Vollständiger Leitfaden mit Beispielen

Was ist tRPC und warum wird es benötigt?

tRPC (TypeScript Remote Procedure Call) ist eine moderne Bibliothek zur Erstellung typsicherer (type-safe) APIs zwischen Client und Server. Das Hauptmerkmal von tRPC ist, dass es keine Codegenerierung oder Typduplizierung erfordert. Sie schreiben einfach Funktionen auf dem Server, und der Client erhält darauf Zugriff mit vollständiger TypeScript-Unterstützung – Autovervollständigung, Typprüfung und IntelliSense.

Im Gegensatz zu REST oder GraphQL, wo Sie Schemata, Endpunkte und Typen manuell beschreiben müssen, leitet tRPC die Typen automatisch aus Ihrem Servercode ab. Das vereinfacht die Entwicklung radikal und reduziert die Anzahl der Fehler.

Hauptvorteile von tRPC:

\n
• Vollständige Typsicherheit – Typfehler werden zur Kompilierzeit erkannt, nicht zur Laufzeit
\n
• Keine Codegenerierung – Sie müssen keine Generatoren ausführen oder Schemata synchronisieren
\n
• Minimaler Boilerplate-Code – weniger Code als bei REST oder GraphQL
\n
• Automatische Dokumentation – Typen dienen als Dokumentation
\n
• Einfachheit – funktioniert wie ein normaler Funktionsaufruf
\n

tRPC ist ideal für Full-Stack-Anwendungen in TypeScript (Next.js, Remix, Express, Fastify) und für Microservices-Architekturen.

Installation von tRPC

tRPC besteht aus mehreren Paketen. Für die grundlegende Nutzung benötigen Sie:

# Installation der Server- und Client-Teile\nnpm install @trpc/server @trpc/client\n\n# Installation des React-Adapters (falls Sie React verwenden)\nnpm install @trpc/react-query @tanstack/react-query\n\n# Installation des Adapters für Next.js\nnpm install @trpc/next @trpc/react-query @tanstack/react-query\n\n# Installation von Zod für die Validierung (empfohlen)\nnpm install zod

Wenn Sie yarn oder pnpm verwenden:

yarn add @trpc/server @trpc/client\npnpm add @trpc/server @trpc/client

Für Python-Entwickler (falls Sie Python im Backend verwenden): tRPC ist eine TypeScript-Bibliothek, aber Sie können sie mit Python über trpc-py (experimenteller Wrapper) verwenden. Das Haupt-Ökosystem ist jedoch TypeScript.

Schnellstart mit Codebeispiel

Lassen Sie uns eine einfache Anwendung erstellen: einen Server mit Prozeduren für die Benutzerverwaltung und einen Client, der diese aufruft.

1. Server (server.ts)

import { initTRPC } from '@trpc/server';\nimport { z } from 'zod';\n\n// Erstellen einer tRPC-Instanz\nconst t = initTRPC.create();\n\n// Definieren des Benutzertyps\ninterface User {\n  id: number;\n  name: string;\n  email: string;\n}\n\n// Fake-Datenbank\nconst users: User[] = [\n  { id: 1, name: 'Alice', email: 'alice@example.com' },\n  { id: 2, name: 'Bob', email: 'bob@example.com' },\n];\n\n// Erstellen eines Routers mit Prozeduren\nconst appRouter = t.router({\n  // Prozedur zum Abrufen aller Benutzer\n  getUsers: t.procedure\n    .query(() => {\n      return users;\n    }),\n\n  // Prozedur zum Abrufen eines Benutzers nach ID\n  getUserById: t.procedure\n    .input(z.number())\n    .query(({ input }) => {\n      return users.find(user => user.id === input) || null;\n    }),\n\n  // Prozedur zum Erstellen eines Benutzers\n  createUser: t.procedure\n    .input(z.object({\n      name: z.string().min(1),\n      email: z.string().email(),\n    }))\n    .mutation(({ input }) => {\n      const newUser: User = {\n        id: users.length + 1,\n        name: input.name,\n        email: input.email,\n      };\n      users.push(newUser);\n      return newUser;\n    }),\n});\n\n// Exportieren des Router-Typs für den Client\nexport type AppRouter = typeof appRouter;

2. Client (client.ts)

import { createTRPCClient, httpBatchLink } from '@trpc/client';\nimport type { AppRouter } from './server';\n\n// Erstellen des Clients\nconst client