Comprendre Zod en 2 minutes : Validation de schéma en TypeScript

Tu cherches un moyen simple et efficace de valider tes données en TypeScript ? Découvre Zod, la bibliothèque qui va révolutionner ta façon de gérer la validation de données. En seulement 2 minutes, tu vas comprendre pourquoi Zod est devenu incontournable !

Pourquoi Zod ? 🎯

Zod est une bibliothèque de validation qui se démarque par :

• Une syntaxe intuitive et concise
• Une intégration parfaite avec TypeScript
• Une inférence automatique des types
• Des messages d'erreur clairs et personnalisables

Installation rapide ⚙️

bash
1npm install zod
2# ou
3yarn add zod

Les bases de Zod en 30 secondes 🚀

typescript
1import { z } from 'zod';
2
3// Définition d'un schéma simple
4const userSchema = z.object({
5  nom: z.string().min(2, 'Le nom doit contenir au moins 2 caractères'),
6  age: z.number().min(18, "L'utilisateur doit être majeur"),
7  email: z.string().email("Format d'email invalide"),
8});
9
10// Type inféré automatiquement !
11type User = z.infer<typeof userSchema>;
12
13// Validation des données
14const validateUser = (data: unknown) => {
15  const result = userSchema.safeParse(data);
16  return result.success ? result.data : result.error.issues;
17};

Fonctionnalités avancées 💪

Validation conditionnelle

typescript
1const formulaireSchema = z
2  .object({
3    type: z.enum(['particulier', 'entreprise']),
4    siret: z.string().optional(),
5  })
6  .refine((data) => !(data.type === 'entreprise' && !data.siret), {
7    message: 'Le SIRET est obligatoire pour une entreprise',
8  });

Transformations automatiques

typescript
1const dateSchema = z.string().transform((str) => new Date(str));
2const numberSchema = z.string().transform(Number);

Bonnes pratiques 🎓

1. Privilégier safeParse plutôt que parse pour une gestion d'erreurs plus élégante :

typescript
1const result = userSchema.safeParse(data);
2if (!result.success) {
3  console.log(result.error.issues);
4  return;
5}
6// Utiliser result.data en toute sécurité

2. Réutiliser les schémas pour plus de maintenabilité :

typescript
1const addressSchema = z.object({
2  rue: z.string(),
3  ville: z.string(),
4  codePostal: z.string().regex(/^\d{5}$/),
5});
6
7const userSchema = z.object({
8  // ...autres champs
9  adresse: addressSchema,
10});

Cas d'usage courants 📋

Validation d'API

typescript
1const apiResponseSchema = z.object({
2  status: z.number(),
3  data: z.array(userSchema),
4  metadata: z.record(z.string()),
5});
6
7async function fetchUsers() {
8  const response = await fetch('/api/users');
9  const data = await response.json();
10
11  const result = apiResponseSchema.safeParse(data);
12  if (!result.success) {
13    throw new Error('Réponse API invalide');
14  }
15
16  return result.data;
17}

Validation de formulaire

typescript
1const loginSchema = z.object({
2  email: z.string().email(),
3  password: z.string().min(8),
4});
5
6function handleSubmit(formData: unknown) {
7  const result = loginSchema.safeParse(formData);
8  if (!result.success) {
9    // Afficher les erreurs
10    return;
11  }
12  // Traiter les données validées
13}

Pour aller plus loin 🎈

• Explore les validations personnalisées
• Découvre l'intégration avec React Hook Form
• Utilise Zod pour valider ta configuration

En résumé ✨

Zod simplifie considérablement la validation de données en TypeScript tout en garantissant la sécurité des types. Sa syntaxe intuitive et sa flexibilité en font un outil précieux pour tout développeur TypeScript.

N'hésite pas à consulter la documentation officielle pour approfondir tes connaissances de Zod !