Back

Wie man Daten in TypeScript mit Zod validiert (Mit Beispielen)

Wie man Daten in TypeScript mit Zod validiert (Mit Beispielen)

Die Validierung von Daten zur Laufzeit ist eine häufige Herausforderung für TypeScript-Entwickler. Während TypeScript Fehler während der Kompilierung erkennt, gewährleistet es keine Typsicherheit, sobald Ihr Code ausgeführt wird. Das bedeutet, dass externe Daten wie API-Antworten oder Benutzereingaben unerwartete Laufzeitfehler verursachen können. Zod ist eine TypeScript-orientierte Schema-Validierungsbibliothek, die dieses Problem löst, indem sie Daten zur Laufzeit gegen definierte Schemas validiert.

In diesem Artikel lernen Sie, wie Sie Zod effektiv einsetzen können, von der grundlegenden Verwendung bis hin zu fortgeschrittenen Validierungstechniken, Vergleichen mit anderen Bibliotheken und bewährten Praktiken für die Integration in Ihre Anwendungen.

Wichtige Erkenntnisse

  • Zod validiert Laufzeitdaten effizient mit Schema-Definitionen.
  • Automatische Typinferenz reduziert manuelle Typduplizierung.
  • Ideal für API-Antworten, Formularvalidierung und Umgebungsvariablen.
  • Bietet klare Fehlerbehandlung und detailliertes Feedback.

Warum Zod für TypeScript-Validierung verwenden?

Herkömmliche Validierungsmethoden erfordern umfangreichen Boilerplate-Code mit manuellen Prüfungen. TypeScript-Typen verschwinden zur Laufzeit und lassen potenzielle Laufzeitprobleme ungeprüft. Zod löst diese Probleme durch:

  • Bereitstellung deklarativer Schema-Definitionen
  • Angebot automatischer Laufzeitvalidierung
  • Ableitung von TypeScript-Typen direkt aus Schemas

Zod reduziert den Boilerplate-Code erheblich und stellt sicher, dass Ihre Daten in der gesamten Anwendung konsistent validiert werden.

Erste Schritte mit Zod

Installieren Sie Zod über npm:

npm install zod

Hier ist ein einfaches Beispiel:

import { z } from 'zod';

const nameSchema = z.string();

nameSchema.parse('Alice'); // gibt 'Alice' zurück
nameSchema.parse(42); // wirft ZodError

Sie können auf ähnliche Weise Zahlen, Booleans validieren und Einschränkungen wie Mindest- oder Höchstlängen oder -werte anwenden.

Fortgeschrittene Zod-Validierungstechniken

Validierung komplexer Strukturen

Zod kann verschachtelte Objekte und Arrays mühelos validieren:

const userSchema = z.object({
  name: z.string(),
  age: z.number().min(0),
  email: z.string().email().optional()
});

Optionale und Null-Werte

Verwenden Sie .optional() für optionale Felder und .nullable() für Felder, die explizit Null-Werte akzeptieren können.

Benutzerdefinierte Fehlermeldungen

Verbessern Sie die Klarheit durch Angabe benutzerdefinierter Fehlermeldungen:

z.string().min(5, "Name zu kurz");

Vereinigungen und Schnittmengen

Kombinieren Sie Schemas für komplexe Szenarien:

const schema = z.union([z.string(), z.number()]);

Vergleich von Zod mit anderen Validierungsbibliotheken

Zod bietet im Vergleich zu Bibliotheken wie Yup und Joi einzigartige integrierte TypeScript-Inferenz, was es ideal für TypeScript-zentrierte Arbeitsabläufe macht. Im Gegensatz zu Yup und Joi reduziert Zod die Duplizierung zwischen Schema- und Typdefinitionen.

Verwendung von Zod in realen Anwendungen

API-Antwort-Validierung

Validieren Sie eingehende Daten zuverlässig:

const responseSchema = z.object({ data: z.array(z.string()) });
const result = responseSchema.safeParse(apiResponse);

React-Formularvalidierung

Verwenden Sie Zod mit Bibliotheken wie React Hook Form für nahtlose Formularhandhabung und -validierung.

Umgebungsvariablen-Prüfungen

Sichern Sie Ihre App-Konfiguration:

const envSchema = z.object({ API_URL: z.string().url(), PORT: z.number() });
envSchema.parse(process.env);

Häufige Fehler und bewährte Praktiken

  • Vermeiden Sie überkomplizierte Schemas: Halten Sie Schemas modular und wiederverwendbar.
  • Wählen Sie .safeParse vs. .parse mit Bedacht: Verwenden Sie .parse, wenn Sie Ausnahmen bevorzugen, .safeParse, wenn Sie Fehler explizit behandeln.
  • Behandeln Sie Validierungsfehler ordnungsgemäß: Nutzen Sie immer die detaillierten Fehlermeldungen, die Zod bereitstellt.

Fazit

Zod überbrückt die Lücke zwischen TypeScripts Kompilierzeit- und Laufzeitvalidierung und stellt sicher, dass Ihre Daten genau und zuverlässig sind. Mit Zod wird die Validierungslogik präzise, handhabbar und direkt in TypeScripts Typsystem integriert, was die Robustheit Ihrer Anwendung erheblich verbessert.

Häufig gestellte Fragen

Listen to your bugs 🧘, with OpenReplay

See how users use your app and resolve issues fast.
Loved by thousands of developers