Typescript vs Javascript - Comprendre la différence

L'une des questions que l'on me pose fréquemment est la suivante : quelle est la différence entre JavaScript et Typescript ?

Voyons cela.

Depuis que vous avez commencé à coder, JavaScript (JS) fait partie de tous vos projets frontaux. Si vous êtes un peu familier avec JS, considérez TypeScript comme JS plus quelques fonctionnalités supplémentaires qui rendent votre application plus soignée et typée. TypeScript a été développé en tant que projet open-source par Microsoft afin de rendre le développement JS plus efficace et de détecter les erreurs de compilation dès le début

Dans cet article, nous aborderons certaines caractéristiques importantes de JavaScript et de TypeScript, ainsi que les 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 de JavaScript dans le monde réel est la validation de la page de connexion, qui affiche une erreur lorsque votre nom d'utilisateur/mot de passe est incorrect

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

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

<script>

sentiment = 'heureux' ;

sentiment = 23 ;

</script&gt

Ce code simple déclare une variable et lui attribue la valeur happy (chaîne de caractères). Nous pouvons assigner une valeur d'un autre type (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 sentiment de la part de l'utilisateur

Notre code HTML ressemblera à ceci

<input type = "textbox" id = "howyoufeel"&gt

et le script sera le suivant

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. Vous pouvez donc mettre n'importe quoi comme 234, @.#$%, etc. dans la variable feeling

Caractéristiques de JavaScript

D'après ce qui précède, nous pouvons observer les caractéristiques 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 comporte de nombreuses validations et vérifications 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. Lorsque vous obtenez des valeurs de la part des utilisateurs, il est important de les obtenir correctement dès le début. C'est là que TypeScript intervient

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 on l'appelle le surensemble de JavaScript

Installation de TypeScript

Pour exécuter notre code précédent en TypeScript, nous devons installer le compilateur TypeScript à l'aide du paquetage npm (si vous avez node js)

npm install -g typescript

ou le télécharger directement depuis 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 L'IDE ou éditeur de texte pour écrire du code TypeScript et le sauvegarder au format .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 "feeling" si vous donnez autre chose que le premier type utilisé (dans notre cas, un String) - pendant la compilation elle-même

Il est toujours bon que le code ait une annotation de type pour des raisons de maintenabilité et de facilité d'utilisation

var feeling : string = "heureux"

Ce n'est pas tout !

TypeScript propose de nombreuses autres fonctionnalités qui facilitent la vie des développeurs

Caractéristiques de TypeScript

TypeScript dispose d'un riche ensemble de fonctionnalités et chaque version est accompagnée de nouvelles fonctionnalités qui rendent le développement plus facile qu'auparavant. Par exemple, avec la nouvelle version (4.0), certaines fonctionnalités supplémentaires sont les types de tuple variadiques, les usines JSX personnalisées, l'inférence des propriétés de classe à partir des constructeurs, etc. Voici quelques caractéristiques typiques de TypeScript

• Prise en charge des concepts de programmation orientée objet tels que l'interface, l'héritage, la classe et la généricité
• Détection précoce des erreurs
• Support IDE avec vérification de la syntaxe et suggestions
• Plus facile à déboguer car il est typé
• Transcompilation en JavaScript
• Utilisé pour les applications côté serveur et côté client
• Prise en charge multiplateforme et multi-navigateur
• Prise en charge de 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é parce qu'il était plus facile de tester le code pour les applications d'entreprise de niveau de production. Vous pouvez toujours utiliser les fonctionnalités de typage dynamique, mais aussi taper les variables lorsque cela est vraiment nécessaire

Considérez le code ci-dessous

var mynum = //obtenir de l'utilisateur ;

addten(number){

return number 10 ;

}
Nous nous attendons à ce que le résultat soit toujours un nombre. Mais que se passe-t-il si l'utilisateur donne "sheep" ? Le résultat sera mouton10 - idéalement, nous devrions dire à l'utilisateur que cette opération n'est pas possible !

De plus, lorsque vous disposez des informations sur les types, les éditeurs de texte et les IDE deviennent plus pratiques à utiliser et permettent d'éviter les erreurs d'exécution. Il est également plus facile de remanier 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 un surcoût - l'installation, la compilation, la trans-compilation seront redondantes. Avec JavaScript, vous pouvez simplement taper votre script en HTML et il fonctionnera. Il est également plus facile de déboguer le code lorsque vous pouvez simplement rafraîchir le navigateur à chaque fois que vous modifiez quelque chose

Comparaison directe

Maintenant que nous avons compris les caractéristiques et les avantages de TypeScript et de JavaScript, passons à d'autres comparaisons

Conclusion

Du point de vue de l'apprentissage, JavaScript pourrait être votre choix naturel. Vous ouvrez un fichier, tapez quelque chose à l'intérieur des balises <script></script>Vous pouvez ensuite vous en inspirer pour créer un contenu plus dynamique. Vous pouvez ensuite vous en inspirer pour créer un contenu plus dynamique

De plus, lorsque vous travaillez sur une application à grande échelle, vos connaissances en JavaScript vous permettront de 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 plus à l'aise avec les projets JS et TS, ce qui constitue sans aucun doute un meilleur atout sur le marché. En général, 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.