TypeScript vs JavaScript : ce qui change, ce que tsc produit | We.Inc
Comparez côte à côte TypeScript et le JavaScript qu'il produit, découvrez ce que le vérificateur de types détecte, pourquoi les types disparaissent à l'exécution, et quand du JavaScript pur suffit.
TypeScript, c'est JavaScript plus un système de types. Vous écrivez du JavaScript ordinaire avec des annotations de type facultatives, et le compilateur tsc les vérifie, puis les retire pour produire du JavaScript pur. Les navigateurs et Node exécutent ce résultat, les types n'existent donc jamais à l'exécution. Le gain, c'est de repérer les erreurs pendant que vous codez, pas un code plus rapide.
Côte à côte
Question
JavaScript
TypeScript
S'exécute directement dans le navigateur ?
Oui
Non, il est d'abord compilé ou dépouillé en JavaScript
Quand les erreurs de type sont-elles détectées ?
À l'exécution du code
Pendant l'édition et lors de la vérification par tsc
Extensions de fichier
.js, .mjs, .jsx
.ts, .tsx (.d.ts pour les déclarations)
Types à l'exécution
Valeurs uniquement
Aucun, les annotations sont effacées
Étape de build nécessaire ?
Facultative
Oui pour la vérification ; un outil de suppression des types ou un bundler pour l'exécuter
Du JavaScript valide est-il une entrée valide ?
Oui
Oui, même si le vérificateur peut signaler des erreurs
Choisissez un exemple ci-dessous pour voir un fichier TypeScript à côté du JavaScript que tsc a écrit pour lui. La plupart du temps, le résultat est votre code sans les annotations. Quelques fonctionnalités, comme les enums, génèrent du vrai code, et cette différence compte au moment de choisir vos outils.
Choisissez un exemple : annotations simples, interface, enum, const enum ou erreur de type.
Lisez la source TypeScript à gauche et le JavaScript produit à droite.
Consultez la note sous chaque paire pour voir ce que le compilateur a vérifié et ce qui a survécu dans le résultat.
Copiez l'un ou l'autre côté pour l'essayer dans votre propre projet.
Ajoutez dès le premier jour un tsconfig.json avec strict réglé sur true. L'activer plus tard dans une grosse base de code fait apparaître des centaines d'erreurs d'un coup.
Lors d'une migration, renommez un seul fichier .js en .ts à la fois. Activer allowJs permet aux deux types de fichiers de cohabiter dans le même projet pendant la transition.
N'oubliez pas que le JSON venant d'un serveur n'est pas typé tant que vous ne l'avez pas vérifié. Une annotation de type sur des données récupérées est une promesse faite au compilateur, pas une vérification à l'exécution.
Utilisez un outil rapide de suppression des types (Vite, esbuild ou le type stripping de Node) pour exécuter le code, et gardez tsc --noEmit comme vérification séparée dans votre éditeur et votre CI.
Questions fréquentes
TypeScript est-il un langage différent de JavaScript ?
C'est un sur-ensemble. Tout programme TypeScript devient du JavaScript, et TypeScript ajoute une syntaxe pour décrire la forme des valeurs. Apprenez d'abord JavaScript ; les types viennent s'ajouter par-dessus au lieu de le remplacer.
TypeScript rend-il mon site plus rapide ?
Non. Les annotations sont retirées avant l'exécution du code, le navigateur exécute donc le même JavaScript que celui que vous auriez écrit à la main. Les avantages sont moins de bugs qui atteignent les utilisateurs et des refactorisations plus sûres.
tsc refuse-t-il de compiler en cas d'erreur de type ?
Pas par défaut. tsc signale l'erreur et écrit quand même le fichier .js, ce qui rend possible une migration progressive. Activez noEmitOnError si vous voulez qu'une vérification en échec bloque la sortie.
Node peut-il exécuter des fichiers .ts sans étape de build ?
Les versions récentes de Node retirent la syntaxe de type effaçable et exécutent le fichier, avec le type stripping activé par défaut depuis v23.6.0 et v22.18.0. Node ne vérifie pas les types, et la syntaxe qui nécessite du code généré, comme les enums, est rejetée.
Quand le JavaScript pur est-il le meilleur choix ?
Les petits scripts, les prototypes rapides et les pages avec quelques lignes d'interactivité rentabilisent rarement la configuration. Dès qu'un projet compte plusieurs fichiers, plusieurs personnes ou des données échangées entre modules, le vérificateur commence à faire gagner un temps réel.
Ce que fait réellement tsc
Le compilateur a deux rôles que l'on confond souvent. D'abord, il vérifie les types : il lit chaque fichier, détermine le type de chaque valeur et signale tout ce qui ne correspond pas. Ensuite, il produit du code : il écrit du JavaScript sans la syntaxe de type et, si vous le demandez, réécrit la syntaxe récente pour des cibles plus anciennes.
Les chaînes d'outils modernes séparent généralement ces deux rôles. Un bundler comme Vite retire rapidement les types sans rien vérifier, et tsc --noEmit lance la vérification complète séparément dans votre éditeur ou votre CI. Si vous ne lancez que le bundler, des erreurs de type peuvent partir en production.
Les types sont effacés, alors validez les vraies données
Comme les annotations disparaissent, TypeScript ne peut pas empêcher un serveur d'envoyer une chaîne là où vous avez déclaré un nombre. Écrire const user: User = await res.json() dit seulement au vérificateur de vous faire confiance.
Aux frontières de votre programme, comme les saisies de formulaire, les réponses de fetch et le stockage local, vérifiez la valeur à l'exécution avec une petite fonction de garde ou une bibliothèque de schémas, et laissez le vérificateur propager cette garantie vers l'intérieur.
Les fonctionnalités qui ne sont pas simplement effacées
Les enums, les namespaces contenant du code, les parameter properties et les alias import = produisent tous leur propre JavaScript. TypeScript 5.8 a ajouté l'option erasableSyntaxOnly, qui signale une erreur pour ces constructions, afin qu'un fichier fonctionne avec les outils qui se contentent de supprimer les annotations.
Si vous prévoyez d'exécuter des fichiers .ts directement dans Node ou via un autre outil de suppression des types, préférez les unions de chaînes littérales et les objets as const aux enums. Le guide des enums de ce site montre les deux côte à côte.
Ajouter TypeScript à un projet JavaScript
Installer et créer un tsconfig
Installe le compilateur localement, écrit un tsconfig.json de départ et lance une vérification sans écrire de fichiers.
allowJs permet aux anciens fichiers .js de cohabiter avec les nouveaux fichiers .ts pendant une migration ; noEmit laisse la production des fichiers à votre bundler.
Vérifier les données que le compilateur ne voit pas
Une garde à l'exécution qui affine le type
La fonction vérifie réellement la valeur, et le type de retour indique au compilateur ce qu'elle a prouvé.
Annotations
Les types du paramètre et du retour sont vérifiés, puis supprimés. Le corps reste intact.
Interface
Une interface ne produit aucune sortie. Elle n'existe que pour le vérificateur.
Enum
Un enum classique devient un vrai objet avec un mapping inverse : c'est donc du code généré, pas de la syntaxe effacée.
const enum
tsc remplace les membres d'un const enum par des nombres et laisse un commentaire avec le nom d'origine.
Erreur de type
tsc signale : Argument of type 'string' is not assignable to parameter of type 'number'. Il écrit quand même le fichier, sauf si noEmitOnError est activé.