Playground TypeScript
Écrivez, compilez, vérifiez les types et exécutez du TypeScript dans votre navigateur avec des diagnostics en direct, une sortie JavaScript, des contrôles de mode strict, des exemples rapides et une console sécurisée.
Écrivez, compilez, vérifiez les types et exécutez du TypeScript dans votre navigateur avec des diagnostics en direct, une sortie JavaScript, des contrôles de mode strict, des exemples rapides et une console sécurisée.
'; updateStage('run', false); runnerEl.srcdoc = sandboxHtml; } function downloadJavaScript() { const blob = new Blob([jsOutputEl.value], { type: 'text/javascript;charset=utf-8' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'playground.js'; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); } function tidyIndents() { const tidied = sourceEl.value .replace(/\t/g, ' ') .split('\n') .map(function (line) { return line.replace(/\s+$/g, ''); }) .join('\n') .replace(/\n{4,}/g, '\n\n\n'); sourceEl.value = tidied; compileNow(); } function resetSource() { sourceEl.value = document.getElementById('tsplay-source').defaultValue; compileNow(); } sourceEl.addEventListener('input', scheduleCompile); sourceEl.addEventListener('scroll', function () { linesEl.scrollTop = sourceEl.scrollTop; }); sourceEl.addEventListener('keydown', function (event) { if (event.key === 'Tab') { event.preventDefault(); const start = sourceEl.selectionStart; const end = sourceEl.selectionEnd; sourceEl.value = sourceEl.value.slice(0, start) + ' ' + sourceEl.value.slice(end); sourceEl.selectionStart = sourceEl.selectionEnd = start + 2; scheduleCompile(); } }); document.querySelectorAll('[data-example]').forEach(function (button) { button.addEventListener('click', function () { const name = button.getAttribute('data-example'); if (EXAMPLES[name]) { sourceEl.value = EXAMPLES[name]; compileNow(); } }); }); document.querySelectorAll('.tsplay-result .tsplay-tab').forEach(function (tab) { tab.addEventListener('click', function () { setActiveTab(tab.getAttribute('data-tab')); }); }); [targetEl, moduleEl, strictEl, indexedEl, declarationsEl].forEach(function (control) { control.addEventListener('change', compileNow); }); compileBtn.addEventListener('click', compileNow); runBtn.addEventListener('click', runJavaScript); document.getElementById('tsplay-copy-source').addEventListener('click', function () { copyText(sourceEl.value, 'TypeScript'); }); document.getElementById('tsplay-copy-js').addEventListener('click', function () { copyText(jsOutputEl.value, 'JavaScript'); }); document.getElementById('tsplay-download-js').addEventListener('click', downloadJavaScript); document.getElementById('tsplay-format-btn').addEventListener('click', tidyIndents); document.getElementById('tsplay-clear-console').addEventListener('click', function () { consoleEl.textContent = 'Exécutez le JavaScript compilé pour voir la sortie de la console ici.'; }); document.getElementById('tsplay-clear-btn').addEventListener('click', resetSource); window.addEventListener('message', function (event) { if (!event.data || event.data.tsplayToken !== runnerToken) { return; } addConsoleLine(event.data.kind, event.data.value); }); function waitForCompiler(attempt) { syncEditorStats(); if (window.ts) { compilerStateEl.textContent = 'TypeScript ' + window.ts.version + ' prêt'; setStatus('ready', 'Compilateur prêt'); compileNow(); return; } if (attempt > 80) { compilerStateEl.textContent = 'Compilateur indisponible'; setStatus('error', 'Compilateur indisponible'); diagnosticsEl.innerHTML = '
'; return; } setTimeout(function () { waitForCompiler(attempt + 1); }, 150); } waitForCompiler(0); })();
Votre bloqueur de publicités nous empêche d’afficher des annonces
MiniWebtool reste gratuit grâce aux annonces. Si cet outil vous a aidé, soutenez-nous en passant à une navigation sans publicité avec plus d’utilisations quotidiennes, ou autorisez MiniWebtool.com puis rechargez.
Ce TypeScript Playground vous permet de tester un extrait rapidement sans ouvrir un projet complet. Il exécute le compilateur TypeScript dans votre navigateur, affiche les diagnostics de vérification de types avec les numéros de ligne, émet du JavaScript et peut exécuter des sorties simples dans une console en sandbox.
L’outil est conçu pour les vérifications TypeScript quotidiennes : valider le rétrécissement d’unions, tester des types auxiliaires génériques, comparer les targets du compilateur, confirmer le comportement du strict mode et examiner le JavaScript émis par TypeScript. Il est utile pour apprendre, déboguer un exemple compact, préparer une réponse ou vérifier un petit refactoring avant de l’intégrer à un projet.
Le compilateur du navigateur utilise un fichier de déclaration intégré compact pour les objets JavaScript courants comme les arrays, strings, records, JSON, console et timers. Cela garde le playground rapide et autonome pour les extraits. Si votre code dépend de React, Node.js, DOM APIs ou de déclarations spécifiques à un paquet, confirmez le résultat final dans votre projet avec son véritable tsconfig.json et les paquets de types installés.
Utilisez le playground lorsque vous souhaitez isoler une erreur de type d’une base de code plus large, comparer comment le strict mode modifie les diagnostics, expliquer un concept TypeScript à un collègue ou vérifier comment un petit extrait se compile en JavaScript. Les exemples intégrés couvrent les unions discriminées, les auxiliaires de record génériques, l’opérateur satisfies et les erreurs de type intentionnelles, afin que vous puissiez voir à la fois des états de compilateur sains et en échec.
Oui. Il construit un programme TypeScript dans le navigateur et rapporte les diagnostics du compilateur, y compris les erreurs de type, les erreurs de syntaxe et les messages relatifs aux options du compilateur.
Oui. Les principaux contrôles couvrent target JavaScript, sortie de Module, strict mode, émission de déclarations et noUncheckedIndexedAccess.
Ce playground utilise volontairement une bibliothèque de types intégrée compacte. Pour les types de framework, DOM, Node.js ou paquets npm, utilisez la configuration de votre projet local.
L’exécuteur utilise un iframe en sandbox pour les extraits rapides. Évitez d’exécuter du code non fiable et testez le code réel des applications dans votre environnement de développement habituel.
Citez ce contenu, cette page ou cet outil comme suit :
"Playground TypeScript" sur https://MiniWebtool.com/fr/playground-typescript/ de MiniWebtool, https://MiniWebtool.com/
by miniwebtool team. Updated: 2026-05-23
MiniWebtool
Si vous aimez Playground TypeScript, pensez à ajouter un lien vers cet outil en copiant / collant le code suivant: