Comprendre la différence entre Typescript et JavaScript

L'une des questions fréquemment posées que je reçois est la suivante : quelle est la différence entre JavaScript et Typescript ?

Découvrons-le…

Depuis le moment où vous avez commencé à coder, JavaScript (JS) aurait fait partie de tous vos projets frontaux. Si vous êtes un peu familiarisé avec JS, pensez à TypeScript comme JS plus quelques fonctionnalités supplémentaires qui rendent votre application plus propre et typée . Le typeScript a été développé en tant que projet open source par Microsoft pour rendre le développement JS plus efficace et détecter les erreurs de compilation dès le début.

Dans cet article, nous discuterons de certaines fonctionnalités importantes de JavaScript et de TypeScript et des différences entre les deux langages de script.

Qu'est-ce que JavaScript ?

JavaScript est utilisé pour les scripts côté client. Vous pouvez créer un script sur une page HTML ou créer un fichier avec une extension .js et l'inclure dans votre fichier HTML. Un exemple courant dans le monde réel où vous pouvez voir JavaScript est la validation de la page de connexion, où une erreur s'affiche lorsque votre nom d'utilisateur/mot de passe est incorrect.

Écrivons un simple code JS et exécutons-le sur le navigateur :

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

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

Ce code simple déclare une variable et lui attribue une valeur de happy (string). Nous pouvons affecter une valeur d'un type différent (nombre) à la même variable. JavaScript ne s'en plaindrait pas et nous pouvons exécuter le code sur n'importe quel navigateur sans aucun problème. Maintenant, obtenons la valeur du ressenti de l'utilisateur :

Notre HTML ressemblera à ceci :

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

et le script sera :

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

À moins que nous ne mettions des contrôles explicites dans le script, JS acceptera n'importe quelle valeur de l'utilisateur et la transmettra. Ainsi, vous pouvez mettre n'importe quoi comme 234, @.#$%, etc. dans la variable de sentiment.

Fonctionnalités de JavaScript

De ce qui précède, nous pouvons observer les fonctionnalités suivantes de JavaScript :

• Langage de script faiblement typé
• Utilisé pour les scripts côté client et côté serveur (avec node.js)
• Flexible et dynamique
• Pris en charge par tous les principaux navigateurs
• Léger et interprété

Si vous souhaitez maîtriser JavaScript, consultez ce cours Udemy.

Qu'est-ce que TypeScript ?

Une application réelle aura de nombreuses validations et contrôles dynamiques. Pour de telles applications, le code JavaScript deviendra difficile à tester à un moment donné, principalement parce qu'il n'y a pas de vérification de type. Tout en obtenant les valeurs des utilisateurs, il est important de les obtenir dès le début lui-même. C'est là qu'intervient TypeScript.

TypeScript est fortement typé et possède un compilateur qui se plaint si vous ne définissez pas le type d'une variable.

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

Installation de TypeScript

Pour exécuter notre code précédent dans TypeScript, nous devons installer le compilateur TypeScript à l'aide du package npm (si vous avez un nœud js).

 npm install -g typescript

ou téléchargez-le directement à partir de la page de téléchargement officielle de Microsoft. Vous pouvez également utiliser le terrain de jeu TS pour voir comment le code est trans-compilé de ts à js.

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

Vous pouvez toujours vous en sortir en ne définissant pas le type de variable et TypeScript peut déduire le type de données. Cependant, vous obtiendrez une erreur de « sentiment » si vous donnez autre chose que le premier type utilisé (dans notre cas, une chaîne) – lors de la compilation elle-même.

Il est toujours intéressant pour le code d'avoir une annotation de type pour la maintenabilité et la facilité d'utilisation :

 var feeling: string = “happy”;

Ce n'est pas ça!

TypeScript fournit de nombreuses autres fonctionnalités pour faciliter la vie d'un développeur.

Caractéristiques de TypeScript

Typescript a un ensemble de fonctionnalités riche et chaque version est livrée avec de nouvelles fonctionnalités pour rendre le développement plus facile qu'auparavant. Par exemple, avec la nouvelle version (4.0), certaines fonctionnalités supplémentaires sont les types de tuples variadiques, les usines JSX personnalisées, l'inférence de propriétés de classe à partir des constructeurs, etc. Certaines fonctionnalités typiques de TypeScript sont :

• Prend en charge les concepts de programmation orientés objet tels que l'interface, l'héritage, la classe. génériques
• Détection précoce des erreurs
• Prise en charge de l'IDE avec vérification de la syntaxe et suggestions
• Plus facile à déboguer car il est tapé
• Trans-compilation en JavaScript
• Utilisé pour les applications côté serveur et côté client
• Prise en charge multiplateforme et multinavigateur
• Prend en charge toutes les bibliothèques et extensions JS

Pourquoi avons-nous besoin de TypeScript ? (Avantages de TypeScript par rapport à JavaScript)

Microsoft a développé et utilisé TypeScript pendant deux ans pour ses projets internes avant de le rendre public en 2012. Ils ont créé un JavaScript typé car il était plus facile de tester le code pour les applications d'entreprise de niveau production. Vous pouvez toujours utiliser les fonctionnalités de saisie dynamique mais également saisir les variables lorsque cela est vraiment nécessaire.

Considérez le code ci-dessous :

 var mynum = //get from user; addten(number){ return number + 10; }

Nous nous attendrions à ce que le résultat soit toujours un nombre. Mais, que se passe-t-il si un utilisateur donne « mouton » ? La sortie sera mouton10 – idéalement, nous devons dire à l'utilisateur que cette opération n'est pas possible !

De plus, lorsque vous disposez des informations de type, les éditeurs de texte et les IDE deviennent plus pratiques à utiliser et enregistrent les erreurs d'exécution. Il est également plus facile de refactoriser le code ultérieurement.

Cela signifie-t-il que nous n'avons pas besoin de JavaScript ? (Inconvénients de TypeScript par rapport à JavaScript)

Vous pouvez considérer TypeScript comme une extension de JavaScript, mais certainement pas comme un remplacement.

Pour les petits morceaux de code, TypeScript peut devenir une surcharge - l'installation, la compilation, la trans-compilation seront redondantes. Avec JavaScript, vous pouvez simplement taper votre script en HTML et cela fonctionnerait. Il est également plus facile de déboguer le code lorsque vous pouvez simplement actualiser le navigateur chaque fois que vous modifiez quelque chose.

Comparatif en tête-à-tête

Maintenant que nous avons compris les fonctionnalités et les avantages de TypeScript et de JavaScript, passons en revue plus de comparaisons :

Conclusion

Du point de vue de l'apprentissage, JavaScript pourrait être votre choix naturel. Vous ouvrez un fichier, saisissez quelque chose dans les balises <script></script> , enregistrez-le au format HTML - vous verrez les résultats ! Vous pouvez ensuite vous en servir pour créer un contenu plus dynamique.

De plus, lorsque vous travaillez sur une application à grande échelle, la 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 flexible et à l'aise avec les projets JS et TS - donc certainement un meilleur atout sur le marché. En règle générale, les développeurs TypeScript sont payés entre 110 000 et 147 000 dollars, tandis que les développeurs JS sont payés entre 63 000 et 118 000 dollars par an.