Blog von Sébastien TIMONER
Alle Artikel
🇫🇷🇪🇸🇩🇪🇮🇹🇨🇳🇮🇳🇯🇵
mailgithublinkedinrss
Sébastien Timoner
© 2025
•
timoner.com
  1. Startseite
  3. typescript
  5. Einführung in Zod: Datenvalidierung mit TypeScript

Einführung in Zod: Datenvalidierung mit TypeScript

31.10.2024
Verfügbar in :

Teilen Sie diesen Artikel

FacebookXLinkedIn
Sébastien Timoner

Sébastien TIMONER

Lead-Entwickler
Experte für maßgeschneiderte Entwicklung
Aix-en-Provence, France
Mon Univers : Projets, Rendez-vous et Ressources
GitHub - @offroadlabs
LinkedIn
X - @sebtimoner
sebastien@timoner.com

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.

Willkommen, Typisierungs-Abenteurer! 🎩 TypeScript ist großartig, nicht wahr? Es ermöglicht uns, unseren Code durch statische Typisierung besser zu strukturieren und hilft uns, lästige Bugs zu vermeiden. Aber hier ist der Haken: TypeScript überprüft die Typen... nur zur Kompilierungszeit! 😬 Ja, sobald dein Code ausgeführt wird, garantiert nichts mehr, dass die Daten von außen (APIs, Benutzer, etc.) die erwartete Struktur einhalten. Hier kommt Zod ins Spiel, um uns zu retten! 🚀

In diesem Artikel werden wir entdecken, warum und wie man Zod verwendet, eine Bibliothek, die es dir ermöglicht, Daten dynamisch zu validieren und zu typisieren. Von der grundlegenden Validierung bis zu komplexeren Datenstrukturen bietet dir Zod alles, was du brauchst, um deine Daten in TypeScript ohne Kompromisse abzusichern. Los geht's! 🎉

Was ist Zod? 🤔

Zod ist eine Schema-Validierungsbibliothek für TypeScript, die deine Daten in Echtzeit überprüft. Mit Zod kannst du Validierungsschemata für jeden beliebigen Objekttyp erstellen. Stell dir eine API vor, die unsichere Daten zurückgibt: Zod ermöglicht es dir, sofort zu überprüfen, ob die empfangenen Daten dem erwarteten Typ entsprechen.

Wichtige Eigenschaften von Zod 💪

  • Einfach und flexibel: Die Syntax ist intuitiv und ausdrucksstark.
  • Kombinierte Validierung und Typisierung: Kein Jonglieren zwischen getrennten Typen und Validierungen, Zod macht alles!
  • Sofortiges Feedback: Du erhältst detaillierte Fehlermeldungen, sobald deine Daten nicht zum Schema passen.
  • Robuste API: Von einfacher Validierung bis zu komplexen Transformationen bietet Zod eine vollständige API.

Installation von Zod 📦

Zum Starten musst du nur Zod über npm oder yarn installieren:

bash

Jetzt, wo du bereit bist, lass uns in die Erstellung deines ersten Zod-Schemas eintauchen!

Erstellung von Basis-Schemas mit Zod 🎨

Ein Zod-Schema repräsentiert eine erwartete Datenstruktur. Nehmen wir ein einfaches Beispiel, bei dem wir einen Benutzer mit Namen, Alter und E-Mail-Adresse validieren möchten.

Beispiel: Grundlegende Validierung

So definierst du ein Zod-Schema für einen Benutzer 👤:

typescript

Mit diesem Beispiel überprüft Zod, ob userInput das von userSchema definierte Schema einhält. Wenn alles in Ordnung ist, gibt parse die validierten Daten zurück. Andernfalls wird ein Fehler mit einer detaillierten Nachricht darüber geworfen, was nicht stimmt. Keine Überraschungen in Produktion! 🎉

Bedingte Typen und Vereinigungen: Verwaltung mehrerer Fälle 🔀

Zod verarbeitet auch komplexe Schemata mit bedingten Typen. Nehmen wir an, du hast ein Formular, bei dem der Benutzer entweder ein Kunde oder ein Administrator sein kann. So definierst du dieses Schema mit Zod.

Beispiel: Schema mit Vereinigung

typescript

In diesem Beispiel validiert Zod, dass adminUser entweder ein client oder ein admin mit den erforderlichen Eigenschaften für jede Rolle ist. Praktisch, oder? 👌

Transformationen: Gleichzeitig Validieren und Transformieren 🔄

Manchmal möchtest du Daten validieren und gleichzeitig transformieren. Zod ermöglicht dies einfach, zum Beispiel beim Umwandeln einer Zeichenkette in eine Zahl.

Beispiel: Datentransformation

typescript

Hier akzeptiert Zod eine Zeichenkette ("49.99") und wandelt sie in eine gültige Zahl um.

Benutzerdefinierte Validierungen 🛠️

Zod ermöglicht auch die Erstellung maßgeschneiderter Validierungen mit der Methode .refine(). Nehmen wir an, du möchtest ein Passwort mit spezifischen Kriterien validieren, wie minimale Länge und das Vorhandensein von Sonderzeichen.

Beispiel: Passwortvalidierung

typescript

Die .refine()-Methode ermöglicht es, eine benutzerdefinierte Bedingung hinzuzufügen. Hier überprüft Zod, ob das Passwort die definierten Kriterien erfüllt und liefert spezifische Fehlermeldungen, wenn dies nicht der Fall ist.

Warum Zod wählen? 🌟

Zod ist zu einem unverzichtbaren Tool für die Validierung in TypeScript geworden, weil es:

  • Validierung und Typisierung perfekt kombiniert, ohne Komplexität hinzuzufügen.
  • Eine klare und intuitive API bietet, selbst für komplexe Schemata.
  • Verständliche und leicht zu debuggende Fehler liefert.
  • Sich perfekt in TypeScript-Projekte integriert.

Zusammenfassend

Zod bringt eine zusätzliche Sicherheits- und Zuverlässigkeitsebene zu TypeScript, indem es die empfangenen Daten dynamisch validiert. Du kannst beruhigt schlafen in dem Wissen, dass deine Daten sauber und gut typisiert sind. Also, bereit, Zod in deinem nächsten Projekt auszuprobieren? 😎

1npm install zod
2# oder
3yarn add zod
4# oder
5pnpm add zod
6# oder
7bun add zod
1import { z } from 'zod';
2
3// Benutzerschema
4const userSchema = z.object({
5  name: z.string(), // Name muss ein String sein
6  age: z.number().int().min(18), // Alter muss eine Ganzzahl sein, mindestens 18
7  email: z.string().email(), // Muss eine gültige E-Mail sein
8});
9
10// Beispiel-Eingabedaten
11const userInput = {
12  name: 'Alice',
13  age: 25,
14  email: 'alice@example.com',
15};
16
17// Datenvalidierung
18try {
19  const validUser = userSchema.parse(userInput); // Parse gibt validierte Daten zurück
20  console.log('Gültiger Benutzer:', validUser);
21} catch (e) {
22  console.error('Validierungsfehler:', e.errors);
23}
1// Kundenschema
2const clientSchema = z.object({
3  role: z.literal('client'),
4  preferences: z.array(z.string()), // Array von Präferenzen
5});
6
7// Administratorschema
8const adminSchema = z.object({
9  role: z.literal('admin'),
10  accessLevel: z.number().min(1).max(5), // Zugangslevel von 1 bis 5
11});
12
13// Vereinigung beider Schemas
14const userSchema = z.union([clientSchema, adminSchema]);
15
16// Beispielbenutzer
17const adminUser = {
18  role: 'admin',
19  accessLevel: 3,
20};
21
22// Validierung
23try {
24  const validUser = userSchema.parse(adminUser);
25  console.log('Gültiger Benutzer:', validUser);
26} catch (e) {
27  console.error('Validierungsfehler:', e.errors);
28}
1const priceSchema = z.string().transform((val) => parseFloat(val));
2
3// Beispieleingabe
4const priceInput = '49.99';
5
6// Validierung und Transformation
7const validPrice = priceSchema.parse(priceInput);
8console.log('Validierter und transformierter Preis:', validPrice); // 49.99 (Zahl)
1const passwordSchema = z
2  .string()
3  .min(8, { message: 'Das Passwort muss mindestens 8 Zeichen lang sein' })
4  .refine((val) => /[A-Z]/.test(val), {
5    message: 'Das Passwort muss mindestens einen Großbuchstaben enthalten',
6  })
7  .refine((val) => /[0-9]/.test(val), {
8    message: 'Das Passwort muss mindestens eine Zahl enthalten',
9  });
10
11// Beispieleingabe
12const passwordInput = 'Secure123';
13
14// Validierung
15try {
16  const validPassword = passwordSchema.parse(passwordInput);
17  console.log('Gültiges Passwort:', validPassword);
18} catch (e) {
19  console.error('Validierungsfehler:', e.errors);
20}