Typescript vs Javascript - Comprendre la différence

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 front-end. Si vous êtes un peu familier avec JS, pensez à TypeScript comme JS plus quelques fonctionnalités supplémentaires qui rendent votre application plus ordonnée et tapé. 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.

What is 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 sentiment 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 sentiment.

Features of JavaScript

D'après 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 êtes intéressé par la maîtrise de JavaScript, consultez ceci Cours Udemy.

What is 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 tapé et a 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 en utilisant le package npm (si vous avez noeud js).

npm install -g typescript

ou téléchargez-le directement depuis le site officiel Page de téléchargements Microsoft. Vous pouvez également utiliser le aire de jeux 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 utilisez n'importe quel IDE or éditeur de texte pour écrire du code TypeScript et l'enregistrer sous .ts.

Vous pouvez toujours vous en tirer 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.

Features of TypeScript

Typescript a un riche ensemble de fonctionnalités 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), quelques fonctionnalités supplémentaires sont des types de tuple variadiques, des usines JSX personnalisées, une inférence de propriété de classe à partir de 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-compile en JavaScript
• Utilisé pour les applications côté serveur et côté client
• Prise en charge multiplateforme et multinavigateur
• Prend en charge tous les Bibliothèques JS et extensions

Why do we need TypeScript? (Advantages of TypeScript over 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.

Does that mean we don’t need JavaScript? (Disadvantages of TypeScript over JavaScript)

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

Pour les plus 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.

Head-to-head comparison

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, tapez quelque chose à l'intérieur <script></script> tags, 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 147 et 63 118 dollars, tandis que les développeurs JS sont payés entre XNUMX XNUMX et XNUMX XNUMX dollars par an.