Zod in 2 Minuten verstehen: Schema-Validierung in TypeScript

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
1npm install zod
2# oder
3yarn add zod

Zod-Grundlagen in 30 Sekunden 🚀

typescript
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};

Fortgeschrittene Funktionen 💪

Bedingte Validierung

typescript
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  });

Automatische Transformationen

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

Beste Praktiken 🎓

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

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

2. Schemas wiederverwenden für bessere Wartbarkeit:

typescript
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});

Häufige Anwendungsfälle 📋

API-Validierung

typescript
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}

Formular-Validierung

typescript
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}

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!