Différence entre TypeScript et JavaScript : ce qu’ajoutent les types et lequel apprendre en premier
La différence entre TypeScript et JavaScript tient à une couche ajoutée. JavaScript est le langage que les navigateurs et Node.js exécutent, et ses types ne sont connus que pendant l’exécution du code. TypeScript, c’est JavaScript plus des informations de types qu’un vérificateur lit avant l’exécution. Après la vérification, les types sont effacés et il reste du JavaScript ordinaire : TypeScript ne change donc jamais le comportement d’un programme.
On présente souvent la comparaison comme un choix entre deux langages. Elle ressemble plutôt à un choix d’outillage : TypeScript garde la syntaxe de JavaScript et ajoute des informations pour un vérificateur. Ce guide montre ce qu’elles apportent, où elles demandent un effort et dans quel ordre apprendre les deux.
Idées essentielles
- La syntaxe de JavaScript est valide en TypeScript ; TypeScript ajoute des règles sur la façon dont les différents types de valeurs peuvent être utilisés.
- TypeScript vérifie le code avant son exécution, puis efface les types et produit du JavaScript ordinaire.
- Diviser 4 par un tableau vide s’exécute en JavaScript et affiche Infinity ; TypeScript le signale d’abord comme une erreur.
- Apprenez d’abord JavaScript, puis ajoutez TypeScript quand les variables, les fonctions, les objets et les tableaux vous semblent solides.
Ce qu’ajoute TypeScript
JavaScript a des types dynamiques : une variable n’est pas liée à un seul type de valeur, si bien qu’une même variable peut contenir un nombre, puis une chaîne, puis un booléen. Il est aussi faiblement typé, ce qui veut dire que lorsqu’une opération mélange des types, il les convertit sans rien dire au lieu de s’arrêter. Le nombre 42 plus la chaîne « 1 » donne la chaîne « 421 ». Ces règles sont souples, et elles laissent certaines erreurs atteindre le programme en cours d’exécution.
TypeScript ajoute une vérification statique : il lit le code sans l’exécuter et signale les endroits où des valeurs sont utilisées d’une manière qui n’a pas de sens. Le manuel officiel le décrit comme un sur-ensemble typé de JavaScript, de sorte que la syntaxe JavaScript existante reste valide. Beaucoup de types n’ont pas besoin d’être écrits, car TypeScript les déduit, par exemple à partir du texte donné à une variable.
Comment TypeScript devient du JavaScript
Les navigateurs et Node.js exécutent du JavaScript, pas du TypeScript. Le compilateur, tsc, vérifie un fichier .ts et écrit un fichier .js ordinaire. Pendant cette étape, les types sont effacés : le résultat ne contient aucune information de types.
En principe, TypeScript ne change jamais le comportement à l’exécution du code JavaScript : un code passé de JavaScript à TypeScript s’exécute de la même façon, même si des erreurs de types sont signalées. Par défaut, le compilateur écrit quand même le fichier JavaScript lorsqu’il trouve des erreurs ; l’option noEmitOnError l’oblige à s’arrêter.
La même petite tâche dans les deux
Prenons une fonction nommée area qui multiplie la largeur et la hauteur d’un objet rectangle. En JavaScript, vous l’écrivez, vous l’appelez avec un objet qui a width et height, et elle fonctionne. Si vous écrivez mal une propriété, heigth, rien ne se plaint pendant la saisie : le programme s’exécute, lit une propriété qui n’existe pas et produit un résultat faux, souvent loin de la faute de frappe.
En TypeScript, la même fonction déclare que son paramètre a un width et un height, tous deux des nombres. Le vérificateur signale heigth avant que rien ne s’exécute et suggère height. Appeler area avec une chaîne, ou avec un objet auquel il manque un champ, est signalé de la même manière. Le corps de la fonction est identique ; seuls l’annotation et l’avertissement plus précoce sont nouveaux.
Lequel apprendre en premier
Le manuel est direct sur ce point : on ne peut pas apprendre TypeScript sans apprendre JavaScript, car les deux partagent leur syntaxe et leur comportement à l’exécution. Commencez par JavaScript : valeurs, variables, fonctions, conditions, boucles, objets et tableaux. Passez à TypeScript quand vous savez écrire et déboguer seul de petits programmes ; les types décriront alors des choses que vous comprenez déjà.
VITON13 SCHOOL propose deux cours gratuits pour suivre cet ordre, JavaScript et TypeScript, avec 16 courtes leçons chacun. Le code s’exécute dans le navigateur et les exercices sont vérifiés sur la page, si bien que l’on peut s’exercer sans rien installer.
En mots simples
JavaScript, c’est une lettre envoyée sans relecture ; TypeScript, c’est la même lettre relue par un correcteur strict avant son départ. La personne qui la reçoit lit les mêmes mots dans les deux cas.
À vous de jouer
Ouvrez le cours JavaScript et terminez la première leçon en exécutant le code dans le navigateur jusqu’à ce que la page valide l’exercice.
Résultat attendu
L’exercice est vérifié sur la page, vous voyez donc tout de suite si votre code donne le résultat attendu.
Vérifiez votre réponse: En JavaScript ordinaire, un nom de propriété est mal écrit : heigth. Quand le découvrez-vous, et quand TypeScript vous le dirait-il ?
En JavaScript, vous ne le découvrez que lorsque le programme s’exécute et donne un résultat faux. TypeScript signale la propriété mal écrite pendant la vérification, avant l’exécution du code, et suggère height.
Questions et réponses
TypeScript est-il plus rapide que JavaScript ?
Les types ne changent rien à l’exécution : TypeScript se compile en JavaScript ordinaire et ne modifie jamais son comportement à l’exécution. Le gain tient à la détection plus précoce des erreurs, pas à la vitesse d’exécution.
Le code JavaScript peut-il entrer dans un projet TypeScript ?
Oui. La syntaxe JavaScript est valide en TypeScript, et le code déplacé s’exécute de la même façon. Le vérificateur peut y signaler des erreurs de types, qui indiquent des endroits qui méritent un examen plus attentif.
Commencez dès aujourd’hui le cours gratuit de JavaScript de VITON13 SCHOOL, terminez ses 16 leçons, puis poursuivez avec le cours de TypeScript pour ajouter des types à ce que vous savez déjà.
Sources et lectures
- TypeScript handbook: TypeScript for the New Programmer ↗Sources consultées:
- TypeScript handbook: The Basics ↗Sources consultées:
- MDN: JavaScript data types and data structures ↗Sources consultées: