Typescript vs Javascript - Comprendre la différence

Une question qui revient fréquemment dans les demandes que je reçois est la suivante : quelle distinction existe-t-il entre JavaScript et TypeScript ?

Examinons cela de plus près…

Depuis que vous avez commencé à coder, JavaScript (JS) a probablement été présent dans tous vos projets front-end. Si vous êtes déjà un peu familier avec JS, vous pouvez considérer TypeScript comme une extension de JS, enrichie de fonctionnalités supplémentaires qui rendent votre application plus structurée et typée. TypeScript a été développé en open source par Microsoft afin d'améliorer l'efficacité du développement en JS et de détecter les erreurs de compilation dès le début du processus.

Dans cet article, nous allons analyser certaines caractéristiques clés de JavaScript et de TypeScript, et souligner les différences qui les distinguent en tant que langages de script.

Qu'est-ce que Javascript ?

JavaScript est principalement utilisé pour les scripts côté client. Vous pouvez l'intégrer directement dans une page HTML ou créer un fichier avec l'extension .js et le lier à votre fichier HTML. Un exemple courant de l'utilisation de JavaScript est la validation d'un formulaire de connexion, où un message d'erreur s'affiche si votre nom d'utilisateur ou votre mot de passe est incorrect.

Illustrons cela avec un exemple simple de code JS que nous exécuterons dans un navigateur :

Créez un fichier nommé example.html et ajoutez-y le code suivant :

<script>
feeling = 'happy';
feeling = 23;
</script>

Ce fragment de code déclare une variable et lui affecte initialement la valeur "happy" (une chaîne de caractères). Nous pouvons ensuite affecter à la même variable une valeur d'un type différent (un nombre). JavaScript ne soulèvera aucune objection et nous pouvons exécuter ce code sans problème dans n'importe quel navigateur. À présent, récupérons la valeur du "ressenti" depuis l'utilisateur :

Notre code HTML aura l'aspect suivant :

<input type="textbox" id="howyoufeel">

et le script sera :

feeling = document.getElementById("howyoufeel").value;

À moins d'ajouter des vérifications explicites dans notre script, JS acceptera et traitera n'importe quelle valeur fournie par l'utilisateur. Vous pouvez ainsi saisir n'importe quoi, comme 234, @.#$%, etc., et cette valeur sera stockée dans la variable "feeling".

Caractéristiques de JavaScript

De cet exemple, nous pouvons dégager les caractéristiques suivantes de JavaScript :

Langage de script à typage faible.
Utilisé pour le développement côté client et côté serveur (avec Node.js).
Flexible et dynamique.
Pris en charge par tous les navigateurs principaux.
Léger et interprété.

Si vous souhaitez approfondir vos connaissances de JavaScript, vous pouvez consulter ce cours Udemy.

Qu'est-ce que TypeScript ?

Une application du monde réel implique de nombreuses validations et vérifications dynamiques. Pour ce type d'applications, le code JavaScript peut devenir difficile à tester, surtout en raison de l'absence de vérification des types. Il est crucial d'obtenir les données des utilisateurs sous le bon format dès le début. C'est là qu'intervient TypeScript.

TypeScript est un langage fortement typé, doté d'un compilateur qui émet des erreurs si vous n'indiquez pas le type d'une variable.

JavaScript et TypeScript sont tous deux conformes aux spécifications ECMAScript pour les langages de script. Typescript peut exécuter tout code JavaScript et prend en charge toutes ses bibliothèques – c'est pourquoi il est considéré comme un sur-ensemble de JavaScript.

Installation de TypeScript

Pour exécuter notre précédent code en TypeScript, nous devons installer le compilateur TypeScript via le gestionnaire de packages npm (si vous utilisez Node.js).

npm install -g typescript

Vous pouvez également le télécharger directement depuis le site officiel page de téléchargement Microsoft. Vous pouvez aussi utiliser l'espace de jeu TS afin de voir comment le code est transcompilé de ts à js.

Une fois cela fait, vous pouvez configurer les paramètres du projet dans un fichier tsconfig.json et utiliser n'importe quel IDE ou éditeur de texte pour écrire du code TypeScript et l'enregistrer avec l'extension .ts.

Vous pouvez techniquement vous passer de la déclaration de type pour une variable et TypeScript peut en déduire le type. Toutefois, lors de la compilation, vous obtiendrez une erreur si vous attribuez à "feeling" une valeur d'un type différent du premier type utilisé (une chaîne dans notre exemple).

Il est toujours préférable d'indiquer explicitement le type des variables pour faciliter la maintenance et l'utilisation du code :

var feeling: string = "happy";

Et ce n'est pas tout !

TypeScript offre bien d'autres fonctionnalités pour simplifier la tâche du développeur.

Caractéristiques de TypeScript

TypeScript offre un riche ensemble de fonctionnalités et chaque nouvelle version apporte son lot d'améliorations pour faciliter le développement. Par exemple, la version 4.0 a introduit des types de tuples variadiques, des fabriques JSX personnalisées, l'inférence de propriétés de classe à partir de constructeurs, etc. Voici quelques caractéristiques typiques de TypeScript :

Prend en charge les concepts de programmation orientée objet comme les interfaces, l'héritage, les classes et les génériques.
Permet la détection précoce des erreurs.
Intégration à l'IDE avec vérification de la syntaxe et suggestions.
Facilite le débogage grâce au typage statique.
Transcompilation en JavaScript.
Utilisé pour les applications côté serveur et côté client.
Prise en charge multiplateforme et multi-navigateur.
Compatibilité avec toutes les bibliothèques et extensions JS.

Pourquoi TypeScript est-il nécessaire ? (Avantages de TypeScript par rapport à JavaScript)

Microsoft a développé et utilisé TypeScript pendant deux ans en interne avant de le rendre public en 2012. Ils ont créé ce JavaScript typé parce que cela facilitait la phase de test pour les applications d'entreprise. Vous pouvez toujours utiliser le typage dynamique, tout en ayant la possibilité de typer les variables lorsque cela s'avère nécessaire.

Prenons l'exemple de ce code :

var mynum = // obtenir la valeur de l'utilisateur ;
addten(number){
return number + 10;
}

On s'attendrait à ce que le résultat soit toujours un nombre. Mais que se passe-t-il si l'utilisateur saisit la valeur "mouton" ? Le résultat sera "mouton10" - idéalement, nous devrions informer l'utilisateur que cette opération n'est pas possible !

De plus, lorsque les informations de type sont disponibles, les éditeurs de texte et les IDE deviennent plus pratiques à utiliser et permettent d'identifier des erreurs potentielles avant l'exécution du code. Il est également plus facile de refactoriser le code ultérieurement.

Est-ce que cela signifie que nous n'avons plus besoin de JavaScript ? (Inconvénients de TypeScript par rapport à JavaScript)

TypeScript peut être considéré comme une extension de JavaScript, mais certainement pas comme un remplacement.

Pour les petits fragments de code, TypeScript peut devenir une source de complexité inutile : l'installation, la compilation et la transcompilation peuvent être redondantes. Avec JavaScript, vous pouvez simplement écrire votre script dans un fichier HTML et il fonctionnera directement. Le débogage est également plus simple : il suffit d'actualiser le navigateur à chaque modification.

Comparaison directe

Maintenant que nous avons compris les caractéristiques et les avantages de TypeScript et de JavaScript, passons à une comparaison plus directe :

TypeScript	JavaScript
Langage typé qui détecte les erreurs de compilation très tôt.	Les erreurs sont détectées à l'exécution.
Convient aux grands projets car il améliore la maintenance et la lisibilité du code.	Au fur et à mesure que le code augmente, il devient plus difficile à tester et à déboguer, donc JS convient mieux aux petits projets.
Sur-ensemble de JS, intégrant des fonctionnalités comme l'orientation objet, la vérification des types, etc.	Langage de script permettant de créer du contenu web dynamique.
Nécessite l'installation du compilateur et la configuration du projet.	Aucune installation nécessaire ; Le code JS peut être directement intégré dans un navigateur à l'aide de la balise <script>
Tous les fichiers .ts sont transcompilés en fichiers .js avant exécution.	Les développeurs peuvent inclure directement des fichiers .js dans les fichiers HTML pour une exécution, en utilisant l'attribut src de la balise <script>.
Puissant et intuitif, avec des fonctionnalités riches comme les modules, les génériques et les interfaces.	Convient pour les applications web simples qui n'ont pas besoin de fonctionnalités avancées.
Utilisé pour le développement côté serveur et côté client.	Facile à utiliser pour les scripts côté client, mais peut devenir lourd et complexe pour les scripts côté serveur.
L'étape de compilation peut rallonger l'exécution.	Aucune compilation n'étant requise, l'exécution est plus rapide.
Prend en charge le typage statique et dynamique.	Ne prend en charge que le typage dynamique.
On peut spécifier le type des variables : var feeling : string = "happy";	Les annotations de type ne peuvent pas être spécifiées car on ne peut pas définir de types.

Conclusion

D'un point de vue apprentissage, JavaScript pourrait être votre choix naturel. Vous ouvrez un fichier, vous écrivez du code entre les balises <script></script>, vous l'enregistrez au format HTML - et vous voyez immédiatement les résultats ! Vous pouvez ensuite l'utiliser pour créer des contenus web plus dynamiques.

De plus, lorsque vous travaillez sur des applications de grande envergure, une bonne connaissance de JavaScript vous aidera à passer facilement à TypeScript.

Cependant, du point de vue de la carrière et de la rémunération, en tant que développeur TypeScript, vous serez plus polyvalent et à l'aise avec les projets JS et TS. En général, les développeurs TypeScript sont rémunérés entre 110 000 $ et 147 000 $, tandis que les développeurs JS perçoivent entre 63 000 $ et 118 000 $ par an.