Tu as déjà passé une heure à chasser un bug qui venait juste d’une donnée mal formée ? Un champ qui devait être un nombre mais qui arrive en chaîne de caractères ? Une API qui te renvoie undefined là où tu attendais un tableau ? C’est l’un des problèmes les plus fréquents en JavaScript, et la plupart des débutants ne savent pas qu’il existe un outil simple pour y mettre fin. Cet outil, c’est Zod.
Dans cet article, on te explique ce que c’est, pourquoi tu en as besoin, comment l’utiliser, et quand ça change vraiment la donne dans tes projets.
Pourquoi valider les données est si important en JavaScript ?
La validation de données, c’est le fait de vérifier qu’une valeur correspond exactement à ce que tu attends avant de l’utiliser dans ton code. En JavaScript, rien ne t’y oblige nativement. Tu peux écrire une fonction qui attend un objet avec un champ email de type string, et si quelqu’un t’envoie null à la place, ton appli plante ou se comporte bizarrement sans que tu comprennes pourquoi.
Ce problème arrive tout le temps. Quand tu lis des données depuis une API externe. Quand tu traites un formulaire. Quand tu lis un fichier JSON. Quand tu passes des props entre composants. Les sources de données non fiables sont partout, et JavaScript, contrairement à d’autres langages, ne va pas te crier dessus au moment de la compilation.
C’est d’ailleurs pour ça que beaucoup de développeurs ont adopté TypeScript plutôt que JavaScript : pour avoir des garanties sur les types. Mais TypeScript a une limite énorme. Il vérifie les types à la compilation, pas à l’exécution. Autrement dit, si une API te renvoie un format inattendu à la volée, TypeScript n’y peut rien. Et c’est exactement là que Zod intervient.
Zod, c’est quoi exactement ?
Zod est une bibliothèque JavaScript et TypeScript qui te permet de définir des schémas de données et de valider n’importe quelle valeur par rapport à ces schémas, au moment de l’exécution. Elle est légère, rapide, et conçue pour s’intégrer naturellement dans des projets TypeScript, tout en fonctionnant très bien avec du JavaScript pur.
L’idée principale, c’est que tu décris la forme que doivent avoir tes données. Zod te dit ensuite si ce que tu reçois correspond ou non. Et si ça ne correspond pas, tu récupères un message d’erreur clair qui t’indique exactement ce qui cloche.
Pour installer Zod dans un projet, une seule commande suffit :
npm install zodEnsuite, tu importes ce dont tu as besoin :
import { z } from "zod";Comment définir un schéma avec Zod ?
Un schéma Zod, c’est une description de la structure et du type de tes données, que tu peux ensuite utiliser pour valider n’importe quelle valeur inconnue. Voici un exemple concret avec un utilisateur :
import { z } from "zod";
// On définit le schéma
const UserSchema = z.object({
id: z.number(),
email: z.string().email(),
age: z.number().min(0).max(120),
pseudo: z.string().optional(),
});
// On valide une donnée
const data = {
id: 1,
email: "[email protected]",
age: 25,
};
const result = UserSchema.safeParse(data);
if (result.success) {
console.log("Données valides :", result.data);
} else {
console.log("Erreur :", result.error.format());
}Ici, si le champ email n’est pas une adresse email valide, ou si age n’est pas un nombre entre 0 et 120, Zod te le dira immédiatement. Le champ pseudo est marqué optional(), donc il n’est pas obligatoire.
La méthode safeParse est particulièrement pratique car elle ne lève pas d’exception. Elle te retourne un objet avec un champ success que tu peux tester. Si tu préfères une exception classique, utilise simplement parse() à la place.
Quelles sont les règles de validation disponibles dans Zod ?
Zod propose un grand nombre de validateurs intégrés qui couvrent pratiquement tous les besoins courants, des types de base aux formats spécifiques. Voici un aperçu des plus utiles :
| Validateur | Ce qu’il vérifie | Exemple |
|---|---|---|
| z.string() | Chaîne de caractères | z.string().min(3).max(50) |
| z.number() | Nombre | z.number().positive() |
| z.boolean() | Booléen | z.boolean() |
| z.array() | Tableau | z.array(z.string()) |
| z.enum() | Valeur parmi une liste | z.enum([« admin », « user »]) |
| z.date() | Date JavaScript | z.date() |
| z.union() | Un type parmi plusieurs | z.union([z.string(), z.number()]) |
Tu peux aussi combiner les schémas, les étendre avec z.merge(), les transformer avec z.transform(), ou encore créer des validations conditionnelles avec z.refine(). La bibliothèque est vraiment complète.
Comment utiliser Zod avec une API externe ?
L’un des cas d’usage les plus puissants de Zod, c’est la validation des réponses d’API, parce que tu n’as aucun contrôle sur ce que le serveur va vraiment t’envoyer. Voici comment faire ça proprement :
import { z } from "zod";
const ProductSchema = z.object({
id: z.number(),
name: z.string(),
price: z.number().nonnegative(),
available: z.boolean(),
});
async function fetchProduct(id) {
const response = await fetch(`https://api.example.com/products/${id}`);
const json = await response.json();
// On valide la réponse avant de l'utiliser
const result = ProductSchema.safeParse(json);
if (!result.success) {
console.error("L'API a renvoyé un format inattendu :", result.error.format());
return null;
}
return result.data; // Ici, les données sont garanties valides
}Ce pattern est extrêmement utile si tu travailles avec des API externes dont tu ne maîtrises pas le format. Plutôt que de faire confiance aveuglément à la réponse, tu la valides d’abord. Si quelque chose change côté serveur, tu le détectes immédiatement.
Est-ce que Zod remplace TypeScript ?
Non, Zod ne remplace pas TypeScript, les deux sont complémentaires et fonctionnent mieux ensemble que séparément. TypeScript te protège à la compilation, pendant que tu écris ton code. Zod te protège à l’exécution, quand les données arrivent réellement.
La bonne nouvelle, c’est que Zod peut inférer automatiquement un type TypeScript à partir d’un schéma. Tu n’as pas besoin de définir ton interface TypeScript et ton schéma Zod séparément :
import { z } from "zod";
const UserSchema = z.object({
id: z.number(),
email: z.string().email(),
});
// TypeScript comprend automatiquement ce type
type User = z.infer<typeof UserSchema>;
// User est équivalent à :
// { id: number; email: string; }C’est une des raisons pour lesquelles Zod est devenu aussi populaire dans les projets Next.js ou avec des frameworks backend comme tRPC. Tu définis ton schéma une fois, et tu as à la fois la validation runtime et les types TypeScript automatiquement.
Quelles sont les erreurs courantes avec Zod ?
Même si Zod est simple à prendre en main, quelques pièges classiques peuvent faire perdre du temps aux débutants. Voici les plus fréquents :
- Utiliser parse() au lieu de safeParse() quand tu ne gères pas les exceptions. Si la validation échoue, parse() lève une erreur qui peut faire planter ton appli si tu ne l’attrapes pas avec un try/catch.
- Oublier que z.string() n’accepte pas les nombres. Si ton API renvoie « 25 » au lieu de 25, z.number() va rejeter la valeur. Utilise z.coerce.number() si tu veux convertir automatiquement.
- Ne pas lire les messages d’erreur de Zod. Ils sont très détaillés et te disent exactement quel champ pose problème. Ne les ignore pas.
- Créer des schémas trop restrictifs sans raison. Si un champ peut légitimement être null dans certains cas, marque-le z.nullable() plutôt que de laisser la validation échouer en production.
Ces erreurs arrivent surtout quand on démarre. Après quelques heures de pratique, Zod devient vraiment naturel à utiliser, même si tu débutes avec Node.js ou un autre environnement JavaScript.
Zod est-il fait pour toi si tu débutes ?
Oui, Zod est particulièrement adapté aux débutants parce que son API est lisible, ses messages d’erreur sont clairs, et il ne nécessite aucune configuration complexe. Tu l’installes, tu définis un schéma, tu valides. C’est tout.
Il devient indispensable dès que ton projet commence à consommer des données externes, à traiter des formulaires, ou à grossir en complexité. Et si tu utilises déjà TypeScript, le fait de pouvoir inférer des types depuis tes schémas va vraiment t’économiser du temps et éviter les désynchronisations entre tes interfaces et ta logique de validation.
Zod s’intègre aussi très bien avec des bibliothèques de formulaires populaires comme React Hook Form, qui supporte nativement la validation via des schémas Zod. Si tu construis des interfaces avec des formulaires, c’est une combinaison redoutable.
Pour aller plus loin dans ta compréhension des outils qui structurent le code JavaScript moderne, tu peux aussi jeter un œil à GraphQL qui impose également des types stricts sur tes échanges de données, ou encore explorer comment GitHub peut t’aider à versionner tes projets pendant que tu apprends tout ça.
En résumé : Zod
Zod est une bibliothèque de validation de schémas pour JavaScript et TypeScript. Elle te permet de décrire la forme exacte que doivent avoir tes données, puis de vérifier à l’exécution que ce que tu reçois correspond vraiment à cette description. C’est particulièrement utile avec les APIs, les formulaires et tous les cas où la donnée vient de l’extérieur. Simple à installer, rapide à prendre en main, et compatible nativement avec TypeScript via l’inférence de types, Zod est aujourd’hui l’un des outils les plus adoptés dans l’écosystème JavaScript moderne. Si tu débutes et que tu veux écrire du code plus robuste sans te prendre la tête, c’est un très bon point de départ.
Questions fréquentes sur Zod
Zod fonctionne-t-il avec JavaScript pur sans TypeScript ?
Oui, Zod fonctionne très bien en JavaScript pur. Tu perds simplement l’inférence automatique de types TypeScript, mais toute la logique de validation à l’exécution reste fonctionnelle. Tu peux l’utiliser dans n’importe quel projet Node.js ou frontend sans avoir TypeScript configuré.
Quelle est la différence entre parse() et safeParse() ?
La méthode parse() lance une exception si la validation échoue. Tu dois donc l’entourer d’un try/catch. La méthode safeParse() retourne un objet avec un champ success et ne lance jamais d’exception. Pour les débutants, safeParse() est généralement plus facile à gérer.
Zod est-il lent ou lourd pour les performances ?
Non, Zod est une bibliothèque légère d’environ 8 Ko gzippée. Elle est optimisée pour être rapide et n’impacte pas significativement les performances de tes applications. Elle est utilisée en production par des milliers de projets sans problème.
Peut-on utiliser Zod pour valider des formulaires HTML ?
Oui, et c’est même l’un de ses cas d’usage les plus populaires. Zod s’intègre nativement avec des bibliothèques comme React Hook Form ou Formik. Tu définis ton schéma Zod, tu le passes à la bibliothèque de formulaire, et la validation se fait automatiquement à la soumission ou en temps réel.
Est-ce que Zod peut transformer les données en même temps qu’il les valide ?
Oui, avec la méthode z.transform(). Tu peux valider une valeur et la convertir en même temps. Par exemple, valider qu’une chaîne est une date valide et la transformer automatiquement en objet Date JavaScript. C’est très pratique pour normaliser les données à la réception.
Zod est-il utilisé dans les grandes entreprises ou seulement par les débutants ?
Zod est utilisé aussi bien par les débutants que par des équipes très expérimentées. Il est intégré dans des frameworks populaires comme tRPC, utilisé dans des projets open source majeurs, et adopté par des startups comme par des grandes entreprises tech. C’est un standard de fait dans l’écosystème TypeScript moderne.