0Pricing
TypeScript Academy · Lektion

Typinferenz zwischen Client und Server

Erhalten Sie vollständig typisierte Clients ohne Codegenerierung.

Typinferenz zwischen Client und Server ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Den Router-Typ teilen

Der Client erhält Typsicherheit, indem er den Typ des Serverrouters importiert. Das ist ein reiner Typimport: Vom Server wird nichts im Client ausgeführt; nur der statische Vertrag überquert die Grenze.

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

Einen typisierten Client erstellen

Verwenden Sie createTRPCClient (oder die Proxy-Variante) mit AppRouter als Typparameter. Das Client-Objekt bildet anschließend die Struktur des Serverrouters ab und bietet für jede Procedure vollständige automatische Vervollständigung.

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

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

Procedures aufrufen

Die Aufrufe bilden den Routerbaum ab. Eine verschachtelte Procedure wie user.byId erreichen Sie über client.user.byId; anschließend rufen Sie darauf .query oder .mutate auf. Eingaben und Ausgaben werden anhand des Servers typisiert.

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

Inferierte Eingaben

Der Client kennt die Eingabe jeder Procedure aus dem Serverschema. Wenn Sie eine falsche Struktur übergeben, erhalten Sie bereits vor dem Start der App einen Kompilierfehler.

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

Inferierte Ausgaben

Auch Rückgabetypen werden weitergegeben. Der aufgelöste Wert einer Query entspricht genau dem, was der Serverresolver zurückgibt, sodass nachgelagerter Code vollständig geprüft wird.

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

Mutationen auf dem Client

Mutationen rufen Sie mit .mutate auf. Dabei gilt dieselbe Inferenz: Die Eingabe wird anhand des Schematyps validiert und die Ausgabe anhand des Resolvers typisiert.

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

Der Ablauf der Inferenz

Verfolgen Sie den Weg eines Typs: Ein zod-Schema auf dem Server leitet den Eingabetyp ab, der Rückgabewert des Resolvers leitet den Ausgabetyp ab, typeof appRouter erfasst beide in AppRouter, und der Client bildet diesen Typ auf aufrufbare Methoden ab. Eine Änderung zieht automatisch überall ihre Folgen nach sich.

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

Hilfstypen ableiten

tRPC stellt Hilfsfunktionen bereit, mit denen sich Eingabe- und Ausgabetypen zur Wiederverwendung extrahieren lassen, etwa in React-Komponenten. inferRouterInputs und inferRouterOutputs liefern Ihnen diese Zuordnungen aus AppRouter.

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

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

Garantie gegen Abweichungen

Da der Client anhand des aktuellen Router-Typs typisiert wird, können Server und Client nicht auseinanderlaufen. Wenn Sie eine Procedure umbenennen oder eine Eingabe ändern, lässt sich der Client erst wieder kompilieren, wenn Sie den Aufruf aktualisieren. Der Compiler ist Ihr Vertragstest.

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

Batching und Links

Das Array links konfiguriert den Transport. httpBatchLink fasst mehrere Aufrufe, die im selben Tick erfolgen, zu einer HTTP-Anfrage zusammen und reduziert so die Zahl der Roundtrips. Das ist eine Optimierung zur Laufzeit und wirkt sich nicht auf die Typen aus.

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

Ende-zu-Ende in der Praxis

Das Ergebnis: Sie rufen client.user.byId.query(...) wie eine lokale Funktion auf, mit automatischer Vervollständigung für Eingaben, geprüften Argumenten und einem typisierten Ergebnis. All dies wird ohne generierte Dateien aus dem Servercode abgeleitet. Das ist Ende-zu-Ende-Typsicherheit durch Inferenz.

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

Kurzer Test

Testen Sie Ihr Verständnis der Inferenz zwischen Client und Server.

Zusammenfassung

Sie haben eine tRPC-API mit vollständiger Typsicherheit verwendet.

  • Importieren Sie AppRouter als reinen Typimport.
  • createTRPCClient<AppRouter> bildet den Routerbaum ab.
  • Eingaben und Ausgaben werden aus den Schemata und Resolvers des Servers abgeleitet.
  • Client und Server können nicht auseinanderlaufen; der Compiler setzt den Vertrag durch.

Als Nächstes: Context und Middleware für Authentifizierung.

Häufig gestellte Fragen

Ist die Lektion „Typinferenz zwischen Client und Server“ kostenlos?

Ja — der vollständige Text von „Typinferenz zwischen Client und Server“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Typinferenz zwischen Client und Server“?

Erhalten Sie vollständig typisierte Clients ohne Codegenerierung. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Typinferenz zwischen Client und Server“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Die tRPC-Architektur
  2. Router und Procedures definieren
  3. Typinferenz zwischen Client und Server
  4. Middleware und Kontext
← Zurück zu TypeScript Academy