Pourquoi Vous devriez Choisir TypeScript Plutôt Que JavaScript

La popularité de TypeScript augmente depuis quelques années. Il est mentionné parmi les cinq langues les plus prometteuses en 2020. Angular, l’un des plus grands frameworks frontend, utilise TypeScript. Environ 60% des programmeurs JS utilisent déjà TypeScript et 22% souhaitent essayer. Pourquoi?

Historiquement, JavaScript est devenu le principal langage de script pour les pages Web et les applications sur Internet. Il est maintenant possible d’utiliser JavaScript à la fois sur le frontend et le backend avec des frameworks comme Node.js et Deno.

Mais JavaScript a-t-il été conçu pour créer de grands systèmes complexes comme ceux du web moderne? Non.

Dans cet article, nous allons vous présenter une solution pour cela – TypeScript – et vous aider à démarrer vers le chemin d’ajout de types à votre code JavaScript.

Voici quelques points que nous aborderons:

• Qu’est-ce que TypeScript ?
• Quels sont les types et comment fonctionnent-ils dans TS?
• JavaScript vs TypeScript: lequel choisir ?
• Comment commencer avec TypeScript.
• Autres ressources pour l’étude du TypeScript.

Qu’est-ce que TypeScript ?

En bref, TypeScript est un surensemble de JavaScript qui a une saisie facultative et se compile en JavaScript simple.

En termes plus simples, TypeScript est techniquement JavaScript avec une saisie statique, chaque fois que vous le souhaitez.

Maintenant, quelles seraient les raisons d’ajouter un typage statique à JavaScript?

Je peux en énumérer au moins trois:

• Vous pouvez éviter les erreurs ninja magistralement cachées comme le classique 'undefined' is not a function.
• Il est plus facile de refactoriser le code sans le casser de manière significative.
• S’orienter dans des systèmes complexes à grande échelle n’est plus un cauchemar.

En fait, une étude montre que 15% de tous les bogues JavaScript peuvent être détectés par TypeScript.

La liberté de typage dynamique conduit souvent à des bogues qui non seulement diminuent l’efficacité du travail du programmeur, mais peuvent également freiner le développement en raison des coûts croissants d’ajout de nouvelles lignes de code.

Par conséquent, l’incapacité de JavaScript à incorporer des éléments tels que les types et les contrôles d’erreurs au moment de la compilation en fait un mauvais choix pour le code côté serveur dans les entreprises et les grandes bases de code. Comme le dit leur slogan, TypeScript est du JavaScript qui évolue.

Que dois-je apprendre à utiliser TypeScript ?

TypeScript est essentiellement un linter JS. Ou, JS avec une documentation que le compilateur peut comprendre.

Par conséquent, contrairement à d’autres langages comme CoffeeScript (qui ajoute du sucre syntaxique) ou PureScript (qui ne ressemble pas du tout à JavaScript), vous n’avez pas besoin d’apprendre beaucoup pour commencer à écrire du code TypeScript.Les types

dans TS sont facultatifs et chaque fichier JS est un fichier TypeScript valide. Alors que le compilateur se plaindra si vous avez des erreurs de type dans vos fichiers initiaux, il vous redonnera un fichier JavaScript qui fonctionne comme avant. Où que vous soyez, TypeScript vous y rencontrera et il est facile de développer progressivement vos compétences.

TypeScript est-il utilisé sur le frontend ou le backend?

TypeScript est compilé en JavaScript. Par conséquent, TS peut être utilisé partout où JS pourrait être utilisé: à la fois le frontend et le backend.

JavaScript est le langage le plus populaire pour implémenter des scripts pour le frontend des applications et des pages Web. Ainsi, TypeScript peut être utilisé dans le même but, mais il brille dans les projets d’entreprise complexes côté serveur.

Chez Serokell, la majeure partie de notre interface Web est implémentée en TypeScript.

Quels sont les types et comment fonctionnent-ils dans TS?

Brève introduction aux types

Les types sont un moyen de distinguer les programmes corrects des programmes incorrects avant de les exécuter en décrivant dans notre code comment nous prévoyons d’utiliser nos données. Ils peuvent varier des types simples comme le nombre et la chaîne aux structures complexes parfaitement modélisées pour notre domaine de problème.

Les langages de programmation se divisent en deux catégories : typés statiquement ou typés dynamiquement.

Dans les langages à typage statique, le type de la variable doit être connu au moment de la compilation. Si nous déclarons une variable, elle doit être connue (ou inférable) par le compilateur si ce sera un nombre, une chaîne ou un booléen. Pensez à Java.

Dans les langues à typage dynamique, ce n’est pas nécessairement le cas. Le type d’une variable n’est connu que lors de l’exécution du programme. Pensez à Python.

TypeScript peut prendre en charge le typage statique, tandis que JavaScript ne le fait pas.

En raison du typage statique de TypeScript, vous devrez essayer plus fort de:

• introduire des variables non définies (aide aux avertissements de compilation)
• additionner deux chaînes contenant des nombres (comme « 4 » + « 20 » = « 420 »)
• effectuez des opérations sur des choses qui ne le permettent pas, comme couper un nombre.

Avec les systèmes de type statique, vous pouvez créer vos propres types composites. Cela permet aux ingénieurs d’exprimer leurs intentions plus en détail.

Les types explicites rendent également votre code auto-documenté: ils s’assurent que vos variables et fonctions correspondent à ce qui est prévu et permettent à l’ordinateur de prendre soin de se souvenir du contexte environnant.

Types de TypeScript

TypeScript a une variété de types de base, comme Booléen, Nombre, Chaîne, Tableau, Tuple, etc. Certains d’entre eux n’existent pas dans JS; vous pouvez en savoir plus à leur sujet dans la documentation de TypeScript.

En plus de ceux-ci, voici quelques autres types que nous voulons présenter pour mettre en valeur l’expressivité de TS:

Tout & Inconnu

Alors que tout type peut couvrir, eh bien, tout ce que vous souhaitez, unknown est son homologue sûr pour le type.

Chaque fois que vous souhaitez échapper au système de types, any vous permet de lui attribuer n’importe quelle variable JavaScript. Il est fréquemment utilisé pour modéliser des variables entrantes (à partir d’API tierces, par exemple) qui n’ont pas encore été vérifiées et dont le type est inconnu.

Unknown ressemble beaucoup à tout, mais il ne vous permettra d’effectuer aucune opération sur la variable avant qu’elle ne soit explicitement vérifiée.

Vide

Void est utilisé lorsqu’aucune valeur n’est renvoyée, par exemple, comme type de retour de fonctions qui ne renvoient rien.

Jamais

Jamais n’est le type de retour pour quelque chose qui ne devrait jamais se produire, comme une fonction qui lancera une exception.

Intersection & Types d’union

Ceux-ci vous permettent de créer des types personnalisés pour mieux s’adapter à votre logique.Les types d’intersection

vous permettent de regrouper plusieurs types de base en un seul type. Par exemple, vous pouvez créer une personne de type personnalisé qui a un name: string et un phone_number: number. Cela équivaut à dire: Je veux que mon type soit ceci et cela.Les types d’union

permettent à votre type de prendre l’un des multiples types de base. Par exemple, vous pouvez avoir une requête qui renvoie result: string ou undefined. Cela équivaut à dire: Je veux que mon type soit ceci ou cela.

Si vous considérez les types comme des espaces, tous ces types ont rapidement un sens.

Les types dans TypeScript peuvent être à la fois implicites et explicites. Si vous n’écrivez pas explicitement vos types, le compilateur utilisera l’inférence de type pour déduire les types que vous utilisez.

Les écrire explicitement, cependant, offre des avantages tels que d’aider les autres développeurs qui lisent votre code et de s’assurer que ce que vous voyez est ce que le compilateur voit.

TypeScript et JavaScript

Il vaut la peine d’être pragmatique. Regardez ce graphique:

De nulle part, TypeScript est maintenant en 7e position dans les pull requests GitHub pour le 1er trimestre 2020, au-dessus de PHP et C. (Source)

Bien qu’une cause considérable en soit le support de TypeScript par des entreprises comme Microsoft (qui l’a créé) et Google, il est pris en charge pour une bonne raison.

3 raisons de choisir TypeScript plutôt que JavaScript

1. TypeScript est plus fiable

Contrairement à JavaScript, le code TypeScript est plus fiable et plus facile à refactoriser. Cela permet aux développeurs d’éviter les erreurs et de réécrire beaucoup plus facilement.Les types

invalident la plupart des erreurs stupides qui peuvent se faufiler dans les bases de code JavaScript et créent une boucle de rétroaction rapide pour corriger toutes les petites erreurs lors de l’écriture de nouveau code et du refactoring.

2. TypeScript est plus explicite

Rendre les types explicites concentre notre attention sur la façon exacte dont notre système est construit et sur la manière dont différentes parties de celui-ci interagissent les unes avec les autres. Dans les systèmes à grande échelle, il est important de pouvoir abstraire le reste du système tout en gardant le contexte à l’esprit. Les types nous permettent de le faire.

3. TypeScript et JavaScript sont pratiquement interchangeables, alors pourquoi pas ?

Puisque JavaScript est un sous-ensemble de TypeScript, vous pouvez utiliser toutes les bibliothèques JavaScript et le code que vous souhaitez dans votre code TypeScript.

Les bibliothèques JavaScript les plus populaires ont des types en 2020 – Definitely Typed est un référentiel avec des types pour de nombreuses bibliothèques JavaScript différentes que vous pouvez utiliser pour rendre vos interactions avec elles plus sûres.

Cela signifie que vous pouvez progressivement adopter TypeScript dans votre base de code JavaScript, en ajoutant d’abord des types à des modules individuels, puis en les élargissant pour consume consommer l’univers connu, je suppose.

Inconvénients de TypeScript

Vous ne pouvez pas simplement prendre une équipe JavaScript ou un référentiel JavaScript et les basculer instantanément en TypeScript idiomatique. Il y a des compromis et des sacrifices initiaux que vous devez faire.

Bien que nous puissions discuter des économies que le fait d’être explicite sur les types vous procure à long terme, à court terme, il faut plus de temps pour les ajouter. Ce n’est sans doute pas une énorme affaire, mais c’est un argument en faveur de JavaScript.

Par conséquent, il se peut que vous ne choisissiez pas TypeScript pour de petits projets et prototypes pour votre propre usage.

Tests par rapport aux types

Pour aborder brièvement la discussion sur les tests par rapport aux types: ces deux choses attrapent différentes classes de bogues, il est donc logique de faire les deux de manière non partisane.

Vous pouvez toujours utiliser des tests unitaires et des techniques plus avancées telles que les tests basés sur les propriétés avec TS tout en conservant les avantages d’un système de type statique.

Pour résumer, voici une comparaison rapide des deux langues:

TypeScript	JavaScript
TS est un langage de script orienté objet	JS est un langage de script orienté objet
Langage dépendant (compile en JavaScript)	Langage indépendant (peut être interprété et exécuté)
Langage compilé, ne peut pas être exécuté directement dans un navigateur	Langage interprété, exécuté directement dans un navigateur Web
Peut être tapé statiquement	Tapé dynamiquement
Mieux structuré et concis	Plus flexible puisque vous n’êtes pas limité par le système de type
A un.l’extension ts	A un.extension js
Créé chez Microsoft par Anders Hejlsberg (concepteur de C#) et maintenu par Microsoft	Créé par Brendan Eich (Netscape) et maintenu par ECMA (European Computer Manufacturers Association).
Un choix équitable pour les projets complexes	Bon pour travailler avec de petits projets simples

Guide de démarrage rapide de TypeScript

Compilateur TypeScript

Pour compiler votre code TS, vous devez installer tsc (abréviation de compilateur TypeScript). La façon la plus simple de le faire est via le terminal. Cela peut être fait facilement via npm en utilisant la commande suivante:

npm install -g typescript

Si vous souhaitez utiliser TypeScript avec du code Visual Studio, il existe un guide pratique sur leur site Web.

Une fois que vous avez installé tsc, vous pouvez compiler vos fichiers avec tsc filename.ts.

Migration de vos fichiers de JavaScript vers TypeScript

Disons que nous voulons changer le fichier JavaScript suivant en TypeScript en raison d’un comportement étrange:

function my_sum(a, b) { return a + b; }let a = 4; let b = "5";my_sum(a, b);

Bonne nouvelle. Tout fichier JS est techniquement un fichier TypeScript valide, vous avez donc un bon départ – il suffit de changer l’extension de fichier en.ts de.js.

TypeScript a une inférence de type, ce qui signifie qu’il peut déduire automatiquement certains des types que vous utilisez sans que vous les ajoutiez. Dans ce cas, il suppose que la fonction somme deux variables de type any, ce qui est vrai mais n’est pas d’une grande utilité pour le moment.

Si nous voulons additionner uniquement des nombres, nous pouvons ajouter une signature de type à my_sum pour qu’elle n’accepte que des nombres.

function my_sum(a: number, b: number) { return a + b; }let a = 4; let b = "5";my_sum(a, b);

Maintenant, TypeScript nous fournit une erreur.

Argument of type 'string' is not assignable to parameter of type 'number'.

Heureusement que nous avons trouvé où se trouve l’erreur. 🙂 Pour échapper davantage à de telles erreurs, vous pouvez également ajouter des définitions de type aux variables.

let b: number = "5" // Type '"5"' is not assignable to type 'number'.let b: number = 5 // Everything ok. 

TypeScript est assez flexible dans ce qu’il peut faire et comment il peut vous aider. Pour un exemple moins trivial sur la façon de déplacer votre base de code JavaScript existante vers TypeScript ou d’utiliser TypeScript pour améliorer votre code JS, lisez ce guide.

Comment utiliser TypeScript dans un navigateur ?

Pour exécuter TypeScript dans un navigateur, il doit être transpilé en JavaScript avec le compilateur TypeScript (tsc). Dans ce cas, tsc crée un nouveau.fichier js basé sur le .code ts, que vous pouvez utiliser de toutes les manières possibles avec un fichier JavaScript.

Ressources pour la poursuite de l’apprentissage

Plongée Profonde TypeScript

Cette ressource Web gratuite a tout ce dont vous avez besoin pour commencer avec TypeScript, y compris des explications plus détaillées des sections que nous avons déjà couvertes ici.

Apprenez Dactylographié À partir de zéro!

Un cours pratique de 3 heures qui passe en revue toutes les fonctions de base de TypeScript, comment l’utiliser pour interagir avec certains frameworks JS et comment utiliser la puissance de TypeScript lors de l’écriture de JavaScript.

Exercice

L’exercice est la meilleure ressource pour s’entraîner à écrire du code dans un nouveau langage de programmation. Des mentors qui vous orienteront vers un code idiomatique, de nombreuses tâches pratiques amusantes – il n’y a rien à ne pas aimer sur ce site Web.

Conclusions

Dans l’ensemble, TypeScript est un excellent outil à avoir dans votre ensemble d’outils même si vous ne l’utilisez pas à pleine capacité. Il est facile de commencer petit et de grandir lentement, en apprenant et en ajoutant de nouvelles fonctionnalités au fur et à mesure. TypeScript est pragmatique et accueillant pour les débutants, il n’y a donc pas besoin d’avoir peur.

J’espère que cet article vous sera utile dans votre voyage dactylographié. Si vous souhaitez de l’aide ou avez des questions, n’oubliez pas de les poser sur nos médias sociaux comme Twitter ou Facebook.