Introduction à Zod : Valider ses Données avec TypeScript

Bienvenue, aventurier du typage ! 🎩 TypeScript est génial, n'est-ce pas ? Il nous permet de mieux structurer notre code en apportant du typage statique, et nous aide à éviter des bugs gênants. Mais voilà le hic : TypeScript vérifie les types... au moment de la compilation seulement ! 😬 Eh oui, une fois que ton code est exécuté, rien ne garantit que les données venant de l'extérieur (API, utilisateurs, etc.) respecteront la structure attendue. C'est là que Zod entre en scène, pour nous sauver la mise ! 🚀

Dans cet article, on va découvrir pourquoi et comment utiliser Zod, une bibliothèque qui te permet de valider et de typer tes données dynamiquement. De la validation basique aux structures de données plus complexes, Zod t'offre de quoi sécuriser tes données en TypeScript sans compromis. Let's go ! 🎉

Zod, c'est quoi ? 🤔

Zod est une librairie de validation de schémas en TypeScript, qui vérifie tes données en temps réel. Avec Zod, tu peux créer des schémas de validation pour n'importe quel type d'objet. Imagine une API qui te renvoie des données incertaines : Zod permet de vérifier à la volée que les données reçues correspondent bien au type attendu.

Quelques caractéristiques clés de Zod 💪

• Simple et flexible : Sa syntaxe est intuitive et expressive.
• Validation et typage combinés : Pas besoin de jongler entre des types et des validations séparés, Zod gère tout !
• Feedback instantané : Tu obtiens des erreurs détaillées dès que tes données ne collent pas au schéma.
• API robuste : De la validation simple aux transformations complexes, Zod offre une API complète.

Installation de Zod 📦

Pour démarrer, il te suffit d'installer Zod via npm ou yarn :

bash

Maintenant que tu es prêt, plongeons dans la création de ton premier schéma Zod !

Création de Schémas de Base avec Zod 🎨

Un schéma Zod représente une structure de données attendue. Prenons un exemple simple où on souhaite valider un utilisateur avec un nom, un âge et une adresse email.

Exemple : Validation de base

Voici comment définir un schéma Zod pour un utilisateur 👤 :

typescript

Avec cet exemple, Zod va vérifier si userInput respecte bien le schéma défini par userSchema. Si tout est en ordre, parse renvoie les données validées. Sinon, il lève une erreur avec un message détaillé sur ce qui ne va pas. Pas de surprise en prod ! 🎉

Types Conditionnels et Union : Gestion des Cas Multiples 🔀

Zod gère aussi les schémas complexes grâce aux types conditionnels. Disons que tu as un formulaire où l'utilisateur peut être un client ou un administrateur. Voici comment définir ce schéma avec Zod.

Exemple : Schéma avec union

typescript

Dans cet exemple, Zod valide que adminUser est soit un client soit un admin avec les propriétés requises pour chaque rôle. Pratique, non ? 👌

Les Transformations : Valider et Transformer en Même Temps 🔄

Parfois, tu veux valider une donnée et la transformer au passage. Zod permet de le faire facilement, comme par exemple en transformant une chaîne de caractères en nombre.

Exemple : Transformation de données

typescript

Ici, Zod accepte une chaîne de caractères ("49.99") et la transforme en un nombre valide.

Validations Personnalisées 🛠️

Zod permet également de créer des validations sur mesure avec la méthode .refine(). Supposons que tu veuilles valider un mot de passe avec des critères spécifiques, comme une longueur minimale et la présence de caractères spéciaux.

Exemple : Validation de mot de passe

typescript

La méthode .refine() permet d'ajouter une condition personnalisée. Ici, Zod vérifie que le mot de passe respecte les critères définis, et fournit des messages d'erreur spécifiques si ce n’est pas le cas.

Pourquoi Choisir Zod ? 🌟

Zod est devenu un incontournable pour la validation en TypeScript, car il :

• Combine parfaitement validation et typage, sans ajouter de complexité.
• Offre une API claire et intuitive, même pour les schémas complexes.
• Fournit des erreurs compréhensibles et faciles à déboguer.
• S'intègre parfaitement dans les projets TypeScript.

En résumé

Zod apporte une couche de sécurité et de fiabilité supplémentaire à TypeScript en validant les données reçues de manière dynamique. Tu pourras dormir sur tes deux oreilles en sachant que tes données sont saines et bien typées. Alors, prêt à essayer Zod dans ton prochain projet ? 😎

1npm install zod
2# ou
3yarn add zod
4# ou
5pnpm add zod
6# ou
7bun add zod

1import { z } from 'zod';
2
3// Schéma utilisateur
4const userSchema = z.object({
5  name: z.string(), // Le nom doit être une chaîne
6  age: z.number().int().min(18), // L'âge doit être un entier, minimum 18
7  email: z.string().email(), // Doit être un email valide
8});
9
10// Exemple de données d'entrée
11const userInput = {
12  name: 'Alice',
13  age: 25,
14  email: 'alice@example.com',
15};
16
17// Validation des données
18try {
19  const validUser = userSchema.parse(userInput); // Parse renvoie les données validées
20  console.log('Utilisateur valide :', validUser);
21} catch (e) {
22  console.error('Erreur de validation :', e.errors);
23}

1// Schéma client
2const clientSchema = z.object({
3  role: z.literal('client'),
4  preferences: z.array(z.string()), // Tableau de préférences
5});
6
7// Schéma administrateur
8const adminSchema = z.object({
9  role: z.literal('admin'),
10  accessLevel: z.number().min(1).max(5), // Niveau d'accès de 1 à 5
11});
12
13// Union des deux schémas
14const userSchema = z.union([clientSchema, adminSchema]);
15
16// Exemple d'utilisateur
17const adminUser = {
18  role: 'admin',
19  accessLevel: 3,
20};
21
22// Validation
23try {
24  const validUser = userSchema.parse(adminUser);
25  console.log('Utilisateur valide :', validUser);
26} catch (e) {
27  console.error('Erreur de validation :', e.errors);
28}

1const priceSchema = z.string().transform((val) => parseFloat(val));
2
3// Exemple d'entrée
4const priceInput = '49.99';
5
6// Validation et transformation
7const validPrice = priceSchema.parse(priceInput);
8console.log('Prix validé et transformé :', validPrice); // 49.99 (nombre)

1const passwordSchema = z
2  .string()
3  .min(8, { message: 'Le mot de passe doit faire au moins 8 caractères' })
4  .refine((val) => /[A-Z]/.test(val), {
5    message: 'Le mot de passe doit contenir au moins une majuscule',
6  })
7  .refine((val) => /[0-9]/.test(val), {
8    message: 'Le mot de passe doit contenir au moins un chiffre',
9  });
10
11// Exemple d'entrée
12const passwordInput = 'Secure123';
13
14// Validation
15try {
16  const validPassword = passwordSchema.parse(passwordInput);
17  console.log('Mot de passe valide :', validPassword);
18} catch (e) {
19  console.error('Erreur de validation :', e.errors);
20}