Vous avez entendu parler de TypeScript, mais ne savez pas vraiment ce que c’est ? Rassurez-vous, car vous n’êtes pas seul ! Dans cet article, je vous propose de démystifier ce langage, qui permet vraiment d'améliorer et sécuriser le code JavaScript. Ainsi, tout deviendra plus clair (enfin, je l'espère !).
Pour ce faire, nous allons rapidement définir ce qu'est TypeScript, entrevoir ce qui basiquement le différencie de JavaScript, et voir si on peut exécuter du code TypeScript directement ! Ça vous dit ? Alors en avant !
Remarque : ici, il s'agit d'un court article introductif à TypeScript. Je développerai tout ce qui est présenté ici dans des articles qui leur seront dédiés, afin de mieux vous expliquer tout ça en détail ! Du reste, n'hésitez pas à vous servir de l'outil de recherche du site (icône en forme de loupe, en haut à droite), pour retrouver ces articles !).
Salut ! Bienvenue sur LeCoinTS, où je partage des tutos TypeScript gratuits et sans pub. Envie de me soutenir dans cette aventure, avec un café ? ☕
Définition de TypeScript
Par définition, TypeScript, ou TS pour les intimes, est un langage de programmation open-source créé en 2012. Plus précisément, c’est un "sur-ensemble" de JavaScript (appelé JS, pour les intimes), en ce sens où il ajoute des fonctionnalités complémentaires à javascript, tout en restant 100% compatible avec lui. En clair : tout code JavaScript valide l'est aussi en TypeScript ! Mais TS va plus loin, en introduisant un typage statique (qui caractérise chaque élément ciblé, dès le début, pour éviter tout un tas d'erreur de programmation ensuite).
Pour la petite histoire, ce langage a été créé par Microsoft pour répondre aux limites du JavaScript, dans le cadre de gros projets (comme ceux d’Office ou Azure). Depuis, TypeScript a été très largement adopté par les développeurs, partout dans le monde, y compris même au niveau d'autres géants, comme Google, par exemple (avec Angular). Ne passez donc pas à côté 😉
JavaScript VS TypeScript
Pour vous illustrer ce qu'apporte TypeScript par rapport à Javascript, voici un exemple simple et parlant :
// JavaScript
let prenom = "Raphaël";
prenom = 45; <--- ne génère par d'erreurIci, on déclare une variable "prenom", dans laquelle on met la valeur "Raphaël" (une chaîne de caractères, donc !). Ensuite, on prend cette même variable, et on y met la valeur 45 à l'intérieur ! Eh bien… cela ne génère pas la moindre erreur côté JavaScript, car il est très permissif (bien qu'on stocke une valeur numérique dans une "variable texte") !
Comme vous vous en doutez, cela peut poser problème par la suite ! Car admettons que 45 soit l'âge de Raphaël, du coup, cela veut dire qu'on a assigné l'âge de Raphaël à son prénom … ! Évidemment, l'idéal serait qu'une erreur soit remontée ici, pour nous signaler le mélange des genres (le stockage d'un nombre entier dans une variable texte). Eh bien ça, c'est en autres choses ce que permet de faire TypeScript 🙂
// TypeScript
let prenom = "Raphaël";
prenom = 45; <--- génère une erreur !Ici, une erreur sera remontée par TypeScript. Car la variable "prenom", une fois assignée avec la valeur "Raphaël", prend le type "chaîne de caractères" (string, en anglais) ; et ce type ne pourra pas changer en cours de route. Du coup, lorsqu'on essaye de mettre une valeur numérique (45) dans la variable "prenom", une erreur de type est signalée par TypeScript (du style : "Type 'number' is not assignable to type 'string'", c'est à dire que le type nombre n'est pas assignable à un type chaîne de caractères !).
Ainsi, avec TypeScript, on pourra détecter des erreurs de typage, avant même que le code soit exécuté ! Intéressant, non ?
Exemple de code TypeScript (avec types)
Comme nous venons de le voir, un code JavaScript peut être exécuté par TypeScript (en signalant d'éventuelles erreurs, si y'en a !). Mais l'inverse n'est pas vrai (à moins d'écrire du code TS sans aucun type, ce qui reviendrait à écrire du code Javascript pur, et donc, ne servirait à rien !).
En fait, il faut bien comprendre que l'intérêt de TypeScript est d'ajouter des types clairement exprimés dans le code, afin de compléter les lacunes de Javascript, en quelque sorte. Ainsi, si chaque variable, fonction, ou autre élément a un type clairement défini dans notre code, tout un tas d'erreurs potentielles seront évitées par la suite (surtout si on développe des programmes complexes !).
Mais visuellement, me direz-vous, à quoi ressemble un programme TypeScript ? Eh bien voici un exemple en image, court, mais assez parlant je trouve ! Et au passage : n'ayez pas peur si vous ne comprenez pas le code ci-dessous, pour l'instant (car il faut un peu de temps pour s'y faire au début, mais une fois qu'on a prit l'habitude, et qu'on voit tout ce qu'il nous procure comme garde-fous, on ne peut plus s'en passer !) :
Comme vous pouvez le constater, un code TypeScript est très similaire au JavaScript, avec quelques fioritures en plus (comme notamment la notion "d'interface", que je vous détaillerai dans un prochain article). Dans tous les cas, sincèrement, vous n'avez pas d'excuses pour ne pas vous y mettre, surtout si cela permet d'améliorer grandement la fiabilité de vos futurs développements 😉
Comment exécuter du code TypeScript ?
Chose primordiale à savoir : basiquement, le code TypeScript ne peut pas être exécuté directement, contrairement au code JavaScript (même s'il existe des moyens détournés, permettant de le faire, au moins en apparence !).
En fait, ce que je veux dire ici, c'est qu'on doit d'abord compiler le code TypeScript qu'on a écrit, pour le transformer en code Javascript ; et c'est seulement ce code Javascript résultant qu'on pourra ensuite exécuter. Pour faire simple :
- le code JavaScript peut être exécuté directement
- le code TypeScript doit préalablement être compilé (transformation en Javascript), pour ensuite pouvoir être exécuté
Ici j'emploie le terme "compilé", car cette étape se fait généralement avec un compilateur (comme le programme "tsc"). Et comme vous l'aurez compris, le compilateur TypeScript n'est au final qu'un convertisseur TypeScript → JavaScript, avec tout un tas de vérifications au passage (comme la remontée d'erreur en cas de mélange des genres, que nous avons vu précédemment !).
Du reste, si vous souhaitez avoir plus d'infos sur ce sujet, n'hésitez pas à lire cet article, sur comment exécuter du code TypeScript avec VScode, ou en ligne de commande. Car ici je voulais simplement souligner le fait que, basiquement, un code TypeScript ne s'exécute pas directement, contrairement au code JavaScript.
En résumé
En résumé, TypeScript, c’est du JavaScript avec des super-pouvoirs (des types pour plus de sécurité et de clarté !). Mais plaisanterie mise à part, c'est avant tout et surtout un outil qui rend le développement plus sûr et plus robuste, surtout lorsqu'on travaille sur des projets lourds ou complexes.
À retenir également : TypeScript ne s'exécute pas dans le navigateur ; il est d'abord converti en JavaScript par un compilateur, pour ensuite pouvoir être exécuté !
Alors… curieux d'avoir plus de détails sur à quoi ça sert TypeScript concrètement ? Si c'est le cas, rendez-vous dans le prochain article : À quoi sert TypeScript en pratique, pour compléter cette introduction à TypeScript ! Et si ce contenu vous a plu, n'hésitez pas à faire un petit don, via le bouton ci-dessous (un café est toujours apprécié !). Merci 🙂
Merci d’avoir lu cet article ! LeCoinTS reste gratuit et sans pub grâce à vous.
Un petit don pour soutenir le site ? ☕
JEROME
Passionné par tout ce qui touche à la programmation informatique en TypeScript, sans toutefois en être expert, j'ai à coeur de vous partager ici, peu à peu, tout ce que j'ai appris, découvert, réalisé, et testé jusqu'à présent ! En espérant que tout cela puisse vous servir, ainsi qu'au plus grand nombre de francophones possible !
(*) Mis à jour le 12/04/2025
