TypeScript-Datenvalidierung: Zod, Yup, io-ts

Datenvalidierung in TypeScript: Überblick über die Bibliotheken Zod, Yup und io-ts

TypeScript ist eine statisch typisierte Sprache, die Typen zur Kompilierungszeit prüft. Zur Laufzeit (Runtime) führt TypeScript jedoch keine Prüfungen durch. Das bedeutet, dass Daten aus externen Quellen – API-Anfragen, Eingabeformularen, Konfigurationsdateien – möglicherweise nicht den erwarteten Typen entsprechen. Um dieses Problem zu lösen, werden Datenvalidierungsbibliotheken verwendet, die die Struktur und die Datentypen zur Laufzeit prüfen.

In diesem Artikel betrachten wir drei beliebte Bibliotheken zur Datenvalidierung in TypeScript: Zod, Yup und io-ts. Sie erfahren, wie sie funktionieren, worin ihre Unterschiede bestehen und wie Sie die passende für Ihr Projekt auswählen.

Warum ist Datenvalidierung in TypeScript notwendig?

Stellen Sie sich vor, Sie schreiben eine Anwendung, die Daten von einem Benutzer über ein Formular erhält:

interface UserInput {  name: string;  age: number;  email: string;}

function processUserInput(input: UserInput) {  console.log(input.name.toUpperCase());}

In TypeScript wird dieser Code kompiliert, selbst wenn input.name zur Laufzeit undefined oder eine Zahl ist. Dies führt zu einem Fehler, der schwer zu finden ist. Validierungsbibliotheken ermöglichen es, sicherzustellen, dass die Daten dem erwarteten Schema entsprechen, und liefern verständliche Fehlermeldungen.

Zod – moderne und schnelle Bibliothek

Zod ist eine Bibliothek für deklarative Validierung und Typableitung. Sie wurde speziell für TypeScript entwickelt und bietet eine prägnante API.

Installation:

npm install zod

Anwendungsbeispiel:

import { z } from 'zod';

// Definieren des Validierungsschemasconst UserSchema = z.object({  name: z.string().min(2, "Der Name muss mindestens 2 Zeichen enthalten"),  age: z.number().int().positive("Das Alter muss eine positive Zahl sein"),  email: z.string().email("Ungültige E-Mail"),});

// Typ basierend auf dem Schema ableitentype User = z.infer<typeof UserSchema>;

// Datenvalidierungconst result = UserSchema.safeParse({  name: "Anna",  age: 25,  email: "anna@example.com",});

if (result.success) {  // result.data hat den Typ User  console.log(result.data.name);} else {  // result.error enthält detaillierte Fehlerinformationen  console.error(result.error.format());}

Zod unterstützt komplexe Strukturen: verschachtelte Objekte, Arrays, Unions, discriminated Unions. Es kann auch Daten transformieren (z. B. Strings in Zahlen umwandeln).

Yup – beliebte Bibliothek aus dem React-Ökosystem

Yup ist eine Bibliothek zur Schema-Validierung, die häufig zusammen mit Formik in React-Anwendungen verwendet wird. Sie hat eine ähnliche API wie Zod, existiert jedoch länger.

Installation:

npm install yup

Anwendungsbeispiel:

import * as yup from 'yup';

// Definieren des Schemasconst userSchema = yup.object({  name: yup.string().min(2, "Der Name muss mindestens 2 Zeichen enthalten").required(),  age: yup.number().integer().positive().required(),  email: yup.string().email("Ungültige E-Mail").required(),});

// Validierung mit der Methode validateuserSchema.validate({  name: "Ivan",  age: 30,  email: "ivan@example.com",}).then(validData => console.log(validData)).catch(err => console.error(err.errors));

Yup bietet praktische Methoden für die Formularvalidierung, unterstützt benutzerdefinierte Fehlermeldungen und bedingte Regeln (when). Allerdings ist es weniger eng in TypeScript integriert als Zod – die Typableitung erfordert zusätzliche Schritte.