Comment valider des données en TypeScript avec Zod (Avec des exemples)

La validation des données à l’exécution est un défi courant pour les développeurs TypeScript. Bien que TypeScript détecte les erreurs lors de la compilation, il ne garantit pas la sécurité des types une fois que votre code est en cours d’exécution. Cela signifie que les données externes, comme les réponses d’API ou les entrées utilisateur, peuvent provoquer des erreurs d’exécution inattendues. Zod est une bibliothèque de validation de schéma TypeScript qui résout ce problème en validant les données par rapport à des schémas définis lors de l’exécution.

Dans cet article, vous apprendrez à utiliser Zod efficacement, de l’utilisation de base aux techniques de validation avancées, en passant par des comparaisons avec d’autres bibliothèques et les meilleures pratiques pour l’intégrer dans vos applications.

Pourquoi utiliser Zod pour la validation TypeScript ?

Les méthodes de validation traditionnelles nécessitent un code répétitif avec des vérifications manuelles. Les types TypeScript disparaissent à l’exécution, laissant des problèmes potentiels non vérifiés. Zod résout ces problèmes en :

• Fournissant des définitions de schéma déclaratives
• Offrant une validation automatique à l’exécution
• Déduisant les types TypeScript directement à partir des schémas

Zod réduit considérablement le code répétitif, garantissant que vos données sont systématiquement validées dans toute votre application.

Premiers pas avec Zod

Installez Zod via npm :

npm install zod

Voici un exemple simple :

import { z } from 'zod';

const nameSchema = z.string();

nameSchema.parse('Alice'); // renvoie 'Alice'
nameSchema.parse(42); // lance une ZodError

Vous pouvez de la même manière valider des nombres, des booléens et appliquer des contraintes comme des longueurs ou des valeurs minimales ou maximales.

Techniques avancées de validation avec Zod

Validation de structures complexes

Zod peut valider des objets et des tableaux imbriqués sans effort :

const userSchema = z.object({
  name: z.string(),
  age: z.number().min(0),
  email: z.string().email().optional()
});

Valeurs optionnelles et nullables

Utilisez .optional() pour les champs optionnels et .nullable() pour les champs qui peuvent explicitement accepter des valeurs nulles.

Messages d’erreur personnalisés

Améliorez la clarté en spécifiant des messages d’erreur personnalisés :

z.string().min(5, "Nom trop court");

Unions et intersections

Combinez des schémas pour des scénarios complexes :

const schema = z.union([z.string(), z.number()]);

Comparaison de Zod avec d’autres bibliothèques de validation

Zod offre une inférence TypeScript intégrée unique par rapport à des bibliothèques comme Yup et Joi, ce qui le rend idéal pour les flux de travail centrés sur TypeScript. Contrairement à Yup et Joi, Zod réduit la duplication entre les définitions de schéma et de type.

Utilisation de Zod dans des applications réelles

Validation des réponses d’API

Validez les données entrantes de manière fiable :

const responseSchema = z.object({ data: z.array(z.string()) });
const result = responseSchema.safeParse(apiResponse);

Validation de formulaires React

Utilisez Zod avec des bibliothèques comme React Hook Form pour une gestion et une validation de formulaires transparentes.

Vérification des variables d’environnement

Sécurisez la configuration de votre application :

const envSchema = z.object({ API_URL: z.string().url(), PORT: z.number() });
envSchema.parse(process.env);

Erreurs courantes et meilleures pratiques

• Évitez de trop compliquer les schémas : Gardez les schémas modulaires et réutilisables.
• Choisissez judicieusement entre .safeParse et .parse : Utilisez .parse lorsque vous préférez les exceptions, .safeParse lorsque vous gérez explicitement les erreurs.
• Gérez correctement les erreurs de validation : Utilisez toujours les messages d’erreur détaillés fournis par Zod.

Conclusion

Zod comble le fossé entre la validation à la compilation et à l’exécution de TypeScript, garantissant que vos données sont précises et fiables. Avec Zod, la logique de validation devient concise, gérable et intégrée directement au système de types de TypeScript, améliorant considérablement la robustesse de votre application.

FAQ