Comment le système de type améliore votre code JavaScript

Vous n'avez donc pas le temps de vous retourner et le mois s'efforce déjà de s'achever. Il reste quelques jours avant le lancement d'un nouveau fil de discussion sur le cours "Développeur JavaScript" , selon la tradition, avant de commencer le cours nous partagerons avec vous la traduction de matériel utile.

Vanilla JavaScript n'est pas typé par nature. Vous pouvez même l'appeler «intelligent», car il est capable de calculer ce qu'est un nombre et ce qu'est une chaîne.

Cela facilite l'exécution de code JavaScript dans un navigateur ou lors de l'exécution de Node.js. Cependant, il est vulnérable à de nombreuses erreurs d'exécution (runtime), ce qui peut ruiner votre expérience utilisateur.



Si jamais vous arriviez à ce qui sera décrit plus tard, vous ne gagnerez que si vous utilisez le système de type.

• Après avoir reçu une liste de données, vous constatez qu'un certain champ n'existe pas dans l'un des enregistrements. Cela entraîne un dysfonctionnement de l'application si ce cas n'est pas détecté et n'est pas traité explicitement.
• L'instance de la classe que vous avez importée n'a pas la méthode que vous essayez d'appeler.
• Votre IDE ne sait pas quelles méthodes et propriétés sont disponibles pour les modules et les bibliothèques, il ne peut donc pas offrir une auto-complétion efficace.

Flow, TypeScript ou ReasonML

Disons que vous avez une base de code existante que vous souhaitez rendre plus fiable et stable. Compte tenu des erreurs de frappe existantes, vous pouvez essayer d'utiliser Flow ou TypeScript pour cela (ils ont une syntaxe assez similaire).

En revanche, l'utilisation de chacun de ces outils encombrants est délicate. Vous vous chargerez du travail de création de types et d'interfaces pour du code qui n'a pas été développé précédemment.

Néanmoins, Flow et TypeScript n'offrent pas une sécurité à 100% lors de l'ajout de la saisie de code.
Pour cette raison, la sécurité de frappe idéale est obtenue par inférence et rend l'annotation des variables et des signatures de fonction plus simple.

Exemples simples et clairement conçus

Considérez le code suivant:

let add = (a, b) => a + b; 

En JavaScript standard, ces arguments peuvent être des nombres ou des chaînes. Dans TypeScript ou Flow, ces arguments peuvent être annotés comme suit:

 let add = (a: number, b: number) => a + b 

Maintenant, nous définissons apparemment exactement deux valeurs int. Pas deux flottants ou deux chaînes; d'autres opérateurs sont utilisés pour leurs opérations d'addition.

Voyons maintenant un exemple légèrement modifié dans Reason:

 let add = (a: string, b: number) => a + b add('some string', 5) // outputs: "some string5" 

Cette fonctionnalité fonctionne! Et cela peut paraître surprenant. Comment Reason comprend-il cela?

 let add = (a, b) => a + b; add("some string", 5); /* This has type: string but somewhere wanted: int */ 

Cette fonctionnalité avait des défauts au niveau de la mise en œuvre. Reason a différents opérateurs pour ajouter int, float et string.

Le but de cet exemple simple est de montrer qu'il est possible d'avoir des «erreurs de type» supplémentaires même si cela ne supprime pas l'application.

Dans un programme Reason, les développeurs n'ont pas à gérer les bogues de production qui surviennent en raison d'une incompatibilité de types ou de valeurs nulles.

Expérience développeur

L'une des plus belles fonctionnalités de TypeScript est que vous voyez des suggestions d'amélioration ou de complétion automatique dans l'éditeur de code.

Il s'agit d'un domaine dans lequel TypeScript a la priorité sur Reason, car un programme TypeScript n'a pas besoin d'être compilé parfaitement pour offrir la saisie semi-automatique. Reason vous obligera à corriger toutes les erreurs de syntaxe et de types avant de vous proposer une solution utile.

C'est ainsi que cela fonctionne dans VSCode, mais je connais de nombreux développeurs Reason qui utilisent vim. Ici, nous n'entrerons pas dans les comparaisons.

Bien que je sois un grand fan de Reason, j'ai également écrit des applications en TypeScript ou Flow. La vague de battage autour de TypeScript est une bonne incitation à le choisir, de ce fait, il bénéficie d'un excellent support communautaire.

La raison, en revanche, est plus difficile à utiliser car moins d'articles et de documentation sont disponibles. J'espère qu'avec son développement cela sera corrigé.

Si vous êtes intéressé par Reason, vous pouvez trouver sa documentation ici . Et suivez des gens comme @jordwalke , @jaredforsyth et @sgrove sur Twitter. Ils peuvent en dire beaucoup sur l'écosystème Reason / OCaml.

Si vous voulez savoir comment Reason fonctionne avec GraphQL, reportez-vous à mon autre article, «Reason avec GraphQL, l'avenir des applications Web de type sécurisé» .

Nous attendons les commentaires sur le matériel et, selon la tradition établie, nous invitons tous les lecteurs à une journée portes ouvertes , qui sera organisée le 25 mars par notre professeur, Alexander Korzhikov .