Comment utiliser le compilateur TypeScript en ligne
- Écrivez ou collez du TypeScript dans l'éditeur, ou partez de l'exemple (Réinitialiser l'exemple le rétablit).
- Cliquez sur Exécuter ou utilisez Ctrl + Entrée (⌘ + Entrée sur Mac).
- Votre code est compilé en JavaScript. Si le compilateur trouve une erreur de syntaxe, elle est listée avec son code d'erreur
TS, sa ligne et sa colonne, et rien ne s'exécute. - Si la compilation réussit, le JavaScript s'exécute. La sortie de
console.logapparaît dans le panneau Sortie, et vous pouvez ouvrir JavaScript généré sous l'éditeur pour voir exactement ce que le compilateur a produit. - Choisissez une limite de temps de 5, 15 ou 60 secondes, ou cliquez sur Arrêter pour mettre fin à une exécution plus tôt.
Lors de la première exécution, la page télécharge le compilateur TypeScript officiel, soit environ 3 Mo. Votre navigateur le met en cache : les exécutions suivantes démarrent donc rapidement.
La compilation et l'exécution se font toutes deux dans un Web Worker, dans votre navigateur. Votre code n'est pas envoyé et n'est pas conservé sur nos serveurs. L'éditeur enregistre votre dernier code dans le stockage local de votre navigateur, et nulle part ailleurs.
Ce qui est pris en charge
Cette page utilise TypeScript 5.6, le compilateur officiel de Microsoft. Il cible ES2022 et exécute le résultat sur le moteur JavaScript de votre navigateur.
- Toute la syntaxe TypeScript : annotations de type, interfaces, alias de type, génériques, types union et intersection, enums, modificateurs d'accès,
satisfies,as constet plus encore. - Sortie JavaScript moderne, avec classes, async/await et chaînage optionnel conservés tels quels.
awaitau niveau supérieur, minuteries et promesses, comme dans le Compilateur JavaScript en ligne.
Limites :
- Transpilation seulement. Le compilateur supprime les types et signale les erreurs de syntaxe, mais il ne fait pas de vérification complète des types. Un code comme
const n: number = "text"compile et s'exécute. Utiliseztsc --noEmitou votre éditeur quand vous avez besoin des erreurs de typage sémantiques. - Pas de DOM : le code s'exécute dans un worker, donc
documentetwindowne sont pas disponibles. - Pas d'imports : les paquets npm, les instructions
importet les API Node.js ne peuvent pas être utilisés.
Aide-mémoire TypeScript
type Shape =
| { kind: "circle"; r: number }
| { kind: "rect"; w: number; h: number };
function area(s: Shape): number {
switch (s.kind) {
case "circle": return Math.PI * s.r ** 2;
case "rect": return s.w * s.h;
}
}
function first<T>(items: T[]): T | undefined {
return items[0];
}
const shapes: Shape[] = [{ kind: "circle", r: 1 }, { kind: "rect", w: 2, h: 3 }];
console.log(shapes.map(area)); // [3.141592653589793, 6]
console.log(first(shapes)?.kind);| Concept | Syntaxe |
|---|---|
| Variable typée | let count: number = 0; |
| Interface | interface User { id: number; name?: string } |
| Type union | type Id = string | number; |
| Fonction générique | function wrap<T>(v: T): T[] { return [v]; } |
| Tableau en lecture seule | const xs: readonly number[] = [1, 2]; |
| Enum | enum Dir { Up, Down } |
Conseils
- Ouvrez JavaScript généré pour voir comment des fonctionnalités comme les enums, les propriétés de paramètres et les champs de classe sont compilées. C'est un moyen rapide de comprendre ce que fait TypeScript à l'exécution.
- N'oubliez pas que les types disparaissent à l'exécution. Pour valider des données venues de l'extérieur (comme du JSON analysé), écrivez des vérifications à l'exécution ou des gardes de type comme
function isUser(x: unknown): x is User. - Besoin de nettoyer la sortie avant de la copier dans un projet ? Collez-la dans le Formateur et minificateur JavaScript.
TS1005: ';' expected signifie que le code n'a pas pu être analysé. Corrigez la ligne et la colonne indiquées dans la sortie, puis relancez.Questions fréquentes
Mes types sont-ils vérifiés ?
Non. L'outil utilise le mode transpilation du compilateur, qui ne signale que les erreurs de syntaxe. Cela le garde rapide et léger, mais les incohérences de types ne sont pas signalées. Pour une vérification complète, exécutez tsc en local ou utilisez un éditeur doté du service de langage TypeScript.
Quelle est la différence entre TypeScript et JavaScript ?
TypeScript est du JavaScript avec des types statiques facultatifs. Les navigateurs ne peuvent pas exécuter TypeScript directement : il est d'abord compilé en JavaScript pur, en supprimant les types et en convertissant quelques fonctionnalités propres à TypeScript, comme les enums. Vous pouvez voir le résultat de cette étape sur cette page.
Quelle version de TypeScript est utilisée ?
TypeScript 5.6, avec ES2022 comme cible de sortie.
Puis-je importer des bibliothèques ?
Non. Chaque exécution compile et exécute un seul fichier sans résolution de modules : les instructions import et les paquets npm ne sont donc pas pris en charge. Consultez tous nos outils pour développeurs pour des utilitaires connexes.
Mis à jour