Comment mon équipe s'est déplacée accidentellement vers TypeScript et l'a aimée

Comme beaucoup de développeurs Web, mon exposition à des langages fortement typés était limitée, mais lorsque Typescript est arrivé, mon équipe a plongé.

Comme beaucoup de développeurs frontaux, la publication de . J'avais utilisé AngularJS pendant quelques années et mon équipe à l'époque avait commencé à ressentir la douleur de construire de gros projets avec elle. Angular 2 semblait résoudre nombre de ces problèmes.

Quand j'ai eu l'occasion de rejoindre une nouvelle équipe et lancer un projet frontend à la fin de 2016, j'ai pensé qu'Angular 2 serait un bon choix. Comme TypeScript était le langage par défaut, c'est ce que nous avons fini par utiliser.

Bien que notre décision d'utiliser TypeScript n'était pas intentionnelle, nous avions entendu certains des avantages supposés et nous étions ravis d'essayer quelque chose de nouveau sur le frontend. Pendant deux décennies, JavaScript a été l'option de prédilection pour le développement de frontend, alors que TypeScript est techniquement un sur-ensemble de JavaScript et qu'il compile finalement en JavaScript.

Notre nouveau projet frontend a maintenant presque deux ans et nous sommes passés de Angular 2 à 5 et nous prévoyons de passer à la version 6 prochainement. Au fur et à mesure que le projet a pris de l'ampleur, nous avons récolté de nombreux avantages à la fois pour Angular et TypeScript, et même si je suis toujours un fan angulaire, mon équipe et moi sommes devenus des fans encore plus grands de TypeScript. Voici quelques-uns des plus gros gains que nous avons réalisés en passant à TypeScript:

1. Un fort typage réduit les bogues, améliore le processus de refactoring

Comme de nombreux développeurs Web, mon exposition à des langages de programmation fortement typés est limitée. Les langages de script Web dominants de la dernière décennie – JavaScript, PHP, Ruby et Python – sont tous «typés dynamiquement», ce qui signifie que les variables peuvent changer de type lors de l’exécution. Bien que cela les rend idéales pour le prototypage rapide de nouveaux logiciels, il les rend également difficiles à gérer avec les équipes et les bases de code .

Examinons comment un typage fort peut rendre les bogues plus difficiles à introduire. Une fonction JavaScript typique qui supprime un utilisateur via un client HTTP pourrait ressembler à ceci:

En regardant cette fonction, il est impossible de savoir exactement quels champs la variable `user` doit avoir ou ce que la méthode` client.deleteUser` renverra. Vous pouvez le comprendre en suivant chaque appel via la pile ou en utilisant un débogueur, mais dans TypeScript, il devient très évident que l'entrée et la sortie de votre fonction doivent être:

Ceci nous indique que la variable `user` doit être un` UserObject` et que la méthode `deleteUser` doit renvoyer une` Promise` d'un `boolean`. Si l'une de ces entrées ou sorties n'est pas correcte, le compilateur de TypeScript attraper l'erreur avant vous exécutez même votre application. Cela empêche l'envoi d'une tonne de bogues et d'erreurs à la production.

2. TypeScript améliore la lisibilité du code et minimise la documentation

Une chose dont je n'avais pas conscience sur les langages fortement typés avant que je commence à créer dans TypeScript était la fréquence à laquelle Par exemple, en JavaScript, je pourrais ajouter la fonction ci-dessus comme suit:

Mais, comme vous pouvez le constater, cela fait beaucoup de lignes supplémentaires pour accomplir ce que TypeScript fait avec quelques mots-clés incorporés dans la fonction elle-même.

L'autre problème avec la documentation est qu'il est difficile de la tenir à jour. . Bien que je pense que les commentaires de code sont parfois nécessaires, il est clair pour moi que le typage fort aide TypeScript à mieux se documenter que la plupart des langages typés de manière dynamique. Il est toujours préférable de s'appuyer sur le code comme documentation lorsque cela est possible .

3. TypeScript est plus convivial pour les développeurs orientés objet

Bien que la programmation fonctionnelle ait connu un regain ces dernières années, la plupart des développeurs se sont concentrés sur la conception et les modèles orientés objet au cours de la dernière décennie. JavaScript n'est pas un langage orienté objet traditionnel, car il manque de classes ( malgré le sucre ES6 ), les interfaces et l'héritage de classe. Rien de tout cela n'est une mauvaise chose - si vous lisez JavaScript de Crockford: The Good Parts vous pourriez l'apprécier, mais il s'agit d'un saut conceptuel que les programmeurs venant de C #, Java ou PHP pourraient ignorer.

TypeScript ajoute des fonctionnalités qui rendent le développement de l'interface frontale plus familier aux développeurs orientés objet. Dans TypeScript, vous pouvez créer et étendre des classes, implémenter des interfaces, créer des classes abstraites, définir l'accès aux membres, utiliser des méthodes et des propriétés statiques et bien plus encore . Bien que toutes ces fonctionnalités soient compilées au format JavaScript standard pour pouvoir être exécutées dans le navigateur, il peut être utile d’avoir ces fonctionnalités orientées objet pour faire le saut vers le développement de l’interface.

4. TypeScript oblige les développeurs à réfléchir à la conception, à l'organisation du code

J'aime travailler avec des développeurs juniors, mais je remarque une chose: ils ont tendance à ne pas anticiper lors de la création d'une nouvelle fonctionnalité. Bien qu'un ingénieur principal puisse consacrer 75% de son temps à réfléchir et 25% à coder, un ingénieur subalterne pourrait faire l'inverse et consacrer 25% de son temps à réfléchir et 75% à taper du code. TypeScript-en raison de sa nature fortement typée peut inciter les développeurs à s'arrêter et à réfléchir un peu plus.

Par exemple, la fonction suivante est valide en JavaScript:

Mais dans TypeScript, une variable comme `placeholder` qui passe d'un booléen à une chaîne n'est pas autorisée. Cela minimise l'utilisation de variables fourre-tout ou d'objets comme «placeholder» dans l'exemple ci-dessus et permet aux développeurs de choisir des interfaces et des types précis pour leurs variables et des types de retour cohérents pour leurs fonctions.

La compatibilité des navigateurs est prise en compte

Bien que n'étant pas exclusivement un avantage de TypeScript, le fait que vous puissiez définir la cible de compilation pour TypeScript en utilisant webpack ou Grunt signifie que vous pouvez travailler dans un langage moderne encore fournir du code JavaScript compatible à tout navigateur. L'application héritée de mon équipe a été écrite en JS et jQuery à la vanille. Nous devions donc faire attention aux fonctionnalités que nous utilisions ou non pour nous assurer que notre site fonctionnait dans les anciennes versions d'Internet Explorer. Maintenant que nous sommes passés à TypeScript compilé, nous n'avons pas à nous soucier de savoir si une fonctionnalité est supportée universellement ou non.

Mais, TypeScript n'est pas parfait ...

Alors que mon équipe était satisfaite de le changement, et nous avons récolté beaucoup d’avantages de l’utilisation de TypeScript, l’utilisation du nouveau langage n’a pas été faite sans compromis. En fait, pour certains projets plus petits, vous constaterez que TypeScript ralentit votre équipe. Si vous avez déjà une suite de tests robuste, vous ne ressentirez peut-être pas autant le besoin d'un typage fort.

Certaines des considérations que nous avons remarquées après le passage à TypeScript incluent:

• TypeScript requiert un IDE pour une efficacité maximale. Du côté positif, Visual Studio Code est gratuit et conçu pour fonctionner avec TypeScript.
• Vous devez prévoir de taper en avant pour obtenir tous les avantages. Lorsque nous avons commencé à utiliser TypeScript, nous n'étions pas très prudents avec notre méthode de saisie `null`. Lorsque nous avons ensuite essayé d'implémenter des vérifications null strictes le compilateur a échoué partout. Si je devais commencer un nouveau projet, je m'assurerais que toutes les règles de frappe étaient en place avant que j'écrive un code.
• Vous pouvez toujours abuser de union et de type pour éviter un typage strictement strict.
• Les développeurs doivent anticiper, écrire plus d'interfaces et taper leurs objets. Cela peut ralentir les développeurs au début, mais, encore une fois, les avantages de TypeScript deviennent plus clairs avec la base de code.
• Toutes les bibliothèques que vous utilisez n'utilisent pas TypeScript. Cela signifie que vous devrez soit créer votre propre fichier de déclaration soit perdre l’avantage de la saisie forte dans la partie de votre code qui interagit avec le code tiers.

Malgré ces pièges mineurs, «TypeScript a permis à notre base de code de se développer de manière organisée et facile à entretenir sur le réseau Graide, et je suis vraiment ravie que nous ayons accidentellement effectué ce changement.

Contenu du blog associé Vous pouvez être intéressé par