Zod in 2 Minuten verstehen: Schema-Validierung in TypeScript

6.11.2024

Verfügbar in :

Teilen Sie diesen Artikel

Sébastien Timoner

Sébastien TIMONER

Lead-Entwickler

Experte für maßgeschneiderte Entwicklung

Aix-en-Provence, France

Als Experte für Webentwicklung und Teammanagement spezialisiere ich mich auf die Erstellung und Optimierung hochleistungsfähiger digitaler Lösungen. Mit umfassender Expertise in modernen Technologien wie React.js, Node.js, TypeScript, Symfony und Zephyr OS für IoT stelle ich bei offroadLabs den Erfolg komplexer SaaS- und IoT-Projekte von der Konzeption bis zur Produktion für Unternehmen verschiedener Branchen sicher.

Bei offroadLabs biete ich maßgeschneiderte Entwicklungsdienstleistungen, die technische Expertise mit einem kollaborativen Ansatz verbinden. Ob bei der Erstellung einer innovativen SaaS-Lösung, der Entwicklung von IoT-Systemen mit Zephyr OS, der Modernisierung einer bestehenden Anwendung oder der Unterstützung bei der Weiterbildung eines Teams - ich setze mich für die Bereitstellung robuster und leistungsstarker Lösungen ein, die auf die spezifischen Bedürfnisse jedes Projekts zugeschnitten sind.

Ich bin verfügbar für Projekte im Raum Aix-en-Provence oder vollständig remote.

Suchst du nach einer einfachen und effektiven Möglichkeit, deine Daten in TypeScript zu validieren? Entdecke Zod, die Bibliothek, die deine Art der Datenvalidierung revolutionieren wird. In nur 2 Minuten wirst du verstehen, warum Zod unverzichtbar geworden ist!

Warum Zod? 🎯

Zod ist eine Validierungsbibliothek, die sich auszeichnet durch:

Intuitive und prägnante Syntax
Perfekte Integration mit TypeScript
Automatische Typ-Inferenz
Klare und anpassbare Fehlermeldungen

Schnelle Installation ⚙️

bash

Zod-Grundlagen in 30 Sekunden 🚀

typescript

Fortgeschrittene Funktionen 💪

Bedingte Validierung

typescript

Automatische Transformationen

typescript

Beste Praktiken 🎓

safeParse bevorzugen gegenüber parse für elegantere Fehlerbehandlung:

typescript

Schemas wiederverwenden für bessere Wartbarkeit:

typescript

Häufige Anwendungsfälle 📋

API-Validierung

typescript

Formular-Validierung

typescript

Weiterführende Themen 🎈

Erkunde benutzerdefinierte Validierungen
Entdecke die Integration mit React Hook Form
Nutze Zod zur Validierung deiner Konfiguration

Zusammenfassung ✨

Zod vereinfacht die Datenvalidierung in TypeScript erheblich und gewährleistet gleichzeitig Typsicherheit. Seine intuitive Syntax und Flexibilität machen es zu einem wertvollen Werkzeug für jeden TypeScript-Entwickler.

Zögere nicht, die offizielle Dokumentation zu konsultieren, um dein Wissen über Zod zu vertiefen!

1npm install zod
2# oder
3yarn add zod

1import { z } from 'zod';
2
3// Einfache Schema-Definition
4const benutzerSchema = z.object({
5  name: z.string().min(2, 'Der Name muss mindestens 2 Zeichen enthalten'),
6  alter: z.number().min(18, 'Der Benutzer muss volljährig sein'),
7  email: z.string().email('Ungültiges E-Mail-Format'),
8});
9
10// Typ wird automatisch abgeleitet!
11type Benutzer = z.infer<typeof benutzerSchema>;
12
13// Datenvalidierung
14const validateBenutzer = (data: unknown) => {
15  const result = benutzerSchema.safeParse(data);
16  return result.success ? result.data : result.error.issues;
17};

1const formularSchema = z
2  .object({
3    typ: z.enum(['privat', 'geschäftlich']),
4    steuernummer: z.string().optional(),
5  })
6  .refine((data) => !(data.typ === 'geschäftlich' && !data.steuernummer), {
7    message: 'Eine Steuernummer ist für Geschäftskunden erforderlich',
8  });

1const datumSchema = z.string().transform((str) => new Date(str));
2const zahlenSchema = z.string().transform(Number);

1const result = benutzerSchema.safeParse(data);
2if (!result.success) {
3  console.log(result.error.issues);
4  return;
5}
6// result.data sicher verwenden

1const adressSchema = z.object({
2  strasse: z.string(),
3  stadt: z.string(),
4  postleitzahl: z.string().regex(/^\d{5}$/),
5});
6
7const benutzerSchema = z.object({
8  // ...weitere Felder
9  adresse: adressSchema,
10});

1const apiAntwortSchema = z.object({
2  status: z.number(),
3  data: z.array(benutzerSchema),
4  metadata: z.record(z.string()),
5});
6
7async function benutzerAbrufen() {
8  const response = await fetch('/api/users');
9  const data = await response.json();
10
11  const result = apiAntwortSchema.safeParse(data);
12  if (!result.success) {
13    throw new Error('Ungültige API-Antwort');
14  }
15
16  return result.data;
17}

1const anmeldeSchema = z.object({
2  email: z.string().email(),
3  passwort: z.string().min(8),
4});
5
6function handleSubmit(formData: unknown) {
7  const result = anmeldeSchema.safeParse(formData);
8  if (!result.success) {
9    // Fehler anzeigen
10    return;
11  }
12  // Validierte Daten verarbeiten
13}