Zod in 2 Minuten verstehen: Schema-Validierung in 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};

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}