Nativement, Javascript n'inclut pas de typage au sens où on l'entend.
Si on prend Java, on peut typer avec char ou byte les variables et les paramètres de fonction.
Si une valeur autre que celle attendue est envoyée, une erreur est levée.
Il n'y a pas ce mécanisme en JavaScript, on peut envoyer n'importe quoi dans une fonction, celle-ci sera toujours exécutée !
TypeScript , la solution intermédiaire pour le typage JavaScript
Inspiré du C#, TypeScript permet d'ajouter une couche de type plutôt robuste.
Les fichiers typescript sont compilés en JavaScript. Il s'agit d'un langage à part entière.
On arrive donc à sa principale limite : le typage est limité à la compilation
Ce code TypeScript
Sera compilé comme ceci :
On constate que toute notion de typage disparaît.
Une librairie de validation pour ajouter un contrôle de type
Il existe des librairies de validation de données, par exemple Zod. Ces librairies permettent de s'assurer que les paramètres sont du bon type.
Il y a un inconvénient : il faut y penser à chaque fois à utiliser ces fonctionnalités, ce qui devient très verbeux.
Sans compter le flux d'exception et l'impossibilité de rendre cet usage obligatoire.
Et si on tentait de fusionner les deux ?
Les décorateurs, une solution pour un typage de JavaScript à l'exécution.
Les décorateurs sont inclus dans TypeScript depuis les premières versions.
Ils utilisent le pattern decorator, qui peut être implémenté en JS natif.
Ils sont en cours d'implémentation en JavaScript. Pour l'instant, nous allons nous concentrer sur TS.
Un décorateur se présente comme ceci :
Cette fonction "decorateur" sera appelée à chaque exécution de foo.
Ce pattern très puissant permet d'injecter des dépendances et de réaliser des contrôles (authentification, formulaires ...).
Nous allons le combiner avec Zod pour pouvoir les transformer en véritable système de typage pour JavaScript.
Pour commencer, il faut créer un utilitaire dans son code qui sera la "boîte noire" de notre système de type:
Il y a ici deux décorateurs :
- @param : son rôle sera de récolter les paramètres à valider. On utilise refect-metadatahttps://www.npmjs.com/package/reflect-metadata qui permet de pouvoir naviguer d'un décorateur à l'autre.
- @validate : celui-ci sera purement le décorateur de validation. On part du principe que tous les paramètres décorés par @param sont requis. Un itérateur les parcours et les valide à l'aide de la fonction parse de Zod. à la fin, la fonction décorée est appelée avec les paramètres validés.
Voici l'implémentation :
Dans ce code, on définit les codecs dans l'ordre de validation (pour name et foo). et on constate qu'une exception est levée lorsque foo est forcé avec le mauvais type.
Application
L'exemple de la validation de formulaire côté Front:
Vous avez un vrai système de typage pour votre code JavaScript!
Lien complet de l'exemple ici :
Vous avez d'autres interrogations sur le développement web ou JavaScript ? N'hésitez à explorer nos autres articles pour enrichir vos connaissances ou à nous contacter pour une accompagnement ou une formation
