Valibot für TypeScript: Komplettguide mit Beispielen

Einleitung: Was ist Valibot und warum braucht man es?

Valibot ist eine moderne, modulare und schlanke Bibliothek zur Datenvalidierung für TypeScript und JavaScript. Im Gegensatz zu Schwergewichten wie Zod oder Joi wurde Valibot mit Fokus auf minimale Bundle-Größe und Tree-Shaking (Entfernung von ungenutztem Code) entwickelt.

Die Kernphilosophie von Valibot lautet: „Zahle nur für das, was du auch nutzt". Wenn du nur prüfen musst, ob ein String eine Mindestlänge hat, importierst du ausschließlich string und minLength – nicht die gesamte Bibliothek. Das macht Valibot zur idealen Wahl für Projekte, bei denen die Größe des finalen JavaScript-Bundles entscheidend ist (z. B. für mobile Apps oder Komponentenbibliotheken).

Die Bibliothek ist vollständig typisiert und bietet eine hervorragende Integration mit TypeScript, indem sie Typen automatisch aus den Validierungsschemata ableitet. Valibot unterstützt sowohl einfache Primitive (Strings, Zahlen, Booleans) als auch komplexe Strukturen (Objekte, Arrays, Union-Typen, rekursive Schemata).

Installation

Valibot wird über den Paketmanager npm verteilt. Führe folgenden Befehl im Terminal deines Projekts aus:

npm install valibot

Wenn du yarn verwendest:

yarn add valibot

Für pnpm:

pnpm add valibot

Nach der Installation kannst du die benötigten Funktionen in deine TypeScript-Datei importieren:

import { string, number, object, minLength, maxValue } from 'valibot';

Schnellstart mit Codebeispiel

Erstellen wir ein einfaches Validierungsschema für ein Benutzerregistrierungsformular. Wir prüfen Name, E-Mail und Alter.

import { object, string, number, email, minLength, maxValue, safeParse } from 'valibot';

// 1. Schema definieren
const UserSchema = object({
  name: string([minLength(2, 'Der Name muss mindestens 2 Zeichen lang sein')]),
  email: string([email('Ungültige E-Mail-Adresse')]),
  age: number([maxValue(120, 'Das Alter darf nicht über 120 liegen')])
});

// 2. Zu prüfende Daten
const inputData = {
  name: 'Anna',
  email: 'anna@example.com',
  age: 30
};

// 3. Validieren
const result = safeParse(UserSchema, inputData);

if (result.success) {
  console.log('Daten sind gültig:', result.output);
  // result.output hat den Typ { name: string; email: string; age: number; }
} else {
  console.error('Validierungsfehler:', result.issues);
  // result.issues ist ein Array mit Fehlerobjekten
}

In diesem Beispiel haben wir safeParse verwendet – eine sichere Methode, die keine Exception wirft, sondern ein Objekt mit dem Feld success zurückgibt. Bei erfolgreicher Validierung enthält result.output die geprüften Daten mit den korrekten Typen.

Wichtige Methoden und Funktionen

Valibot bietet zahlreiche Funktionen zur Erstellung von Schemata. Hier sind die wichtigsten.

1. string()

Funktion: Erstellt ein Schema zur Validierung von String-Werten. Akzeptiert ein optionales Array von Validatoren für zusätzliche Prüfungen (Länge, Muster usw.).

Parameter:

• validations (optional): Ein Array von Validator-Funktionen wie minLength, maxLength, email, url, regex und andere.

Beispiel:

import { string, minLength, maxLength, email } from 'valibot';

const UsernameSchema = string([minLength(3), maxLength(20)]);
const EmailSchema = string([email()]);

console.log(safeParse(UsernameSchema, 'Jo')); // { success: false, issues: [...] }
console.log(safeParse(EmailSchema, 'test@test.com')); // { success: true, output: 'test@test.com' }

2. number()

Funktion: Erstellt ein Schema zur Validierung von Zahlenwerten. Unterstützt Ganzzahlen und Gleitkommazahlen.

Parameter: