TypeScript Playground
Schreiben, kompilieren, prüfen und führen Sie TypeScript in Ihrem Browser aus mit Live-Diagnose, JavaScript-Ausgabe, Strict-Mode-Kontrollen, Schnellbeispielen und einer Sandbox-Konsole.
Schreiben, kompilieren, prüfen und führen Sie TypeScript in Ihrem Browser aus mit Live-Diagnose, JavaScript-Ausgabe, Strict-Mode-Kontrollen, Schnellbeispielen und einer Sandbox-Konsole.
'; 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 = 'Führen Sie das kompilierte JavaScript aus, um hier die Konsolenausgabe zu sehen.'; }); 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 + ' bereit'; setStatus('ready', 'Compiler bereit'); compileNow(); return; } if (attempt > 80) { compilerStateEl.textContent = 'Compiler nicht verfügbar'; setStatus('error', 'Compiler nicht verfügbar'); diagnosticsEl.innerHTML = '
'; return; } setTimeout(function () { waitForCompiler(attempt + 1); }, 150); } waitForCompiler(0); })();
Dein Werbeblocker verhindert, dass wir Anzeigen anzeigen
MiniWebtool bleibt dank Werbung kostenlos. Wenn dir dieses Tool geholfen hat, unterstütze uns mit einem Upgrade für werbefreies Surfen und mehr tägliche Nutzungen, oder erlaube MiniWebtool.com und lade neu.
Mit diesem TypeScript Playground können Sie ein Snippet schnell testen, ohne ein vollständiges Projekt zu öffnen. Es führt den TypeScript-Compiler in Ihrem Browser aus, zeigt Typprüfungs-Diagnosen mit Zeilennummern an, gibt JavaScript aus und kann einfache Ausgaben in einer Sandbox-Konsole ausführen.
Das Tool ist für alltägliche TypeScript-Prüfungen konzipiert: Validierung der Union-Verengung, Testen generischer Hilfstypen, Vergleich von Compiler-Zielen, Bestätigung des Verhaltens im Strict-Modus und Überprüfung des von TypeScript ausgegebenen JavaScripts. Es ist nützlich zum Lernen, Debuggen eines kompakten Beispiels, Vorbereiten einer Antwort oder Überprüfen eines kleinen Refactorings, bevor es in ein Projekt übernommen wird.
Der Browser-Compiler verwendet eine kompakte integrierte Deklarationsdatei für gängige JavaScript-Objekte wie Arrays, Strings, Records, JSON, Konsole und Timer. Das hält den Playground schnell und für Snippets in sich geschlossen. Wenn Ihr Code von React, Node.js, DOM APIs oder paketspezifischen Deklarationen abhängt, bestätigen Sie das endgültige Ergebnis in Ihrem Projekt mit dessen realer tsconfig.json und den installierten Typpaketen.
Verwenden Sie den Playground, wenn Sie einen Typfehler aus einer größeren Codebasis isolieren möchten, vergleichen wollen, wie der Strict-Modus die Diagnose ändert, einem Teamkollegen ein TypeScript-Konzept erklären oder prüfen möchten, wie ein kleines Snippet zu JavaScript kompiliert wird. Die integrierten Beispiele umfassen Discriminated Unions, generische Record-Helfer, den satisfies-Operator und absichtliche Typfehler, sodass Sie sowohl saubere als auch fehlschlagende Compiler-Zustände sehen können.
Ja. Es erstellt ein TypeScript-Programm im Browser und meldet Diagnosen vom Compiler, einschließlich Typfehler, Syntaxfehler und Compiler-Optionsmeldungen.
Ja. Die Hauptsteuerungen umfassen JavaScript-Target, Modulausgabe, Strict-Modus, Deklarations-Emit und noUncheckedIndexedAccess.
Dieser Playground verwendet absichtlich eine kompakte integrierte Typbibliothek. Verwenden Sie für Framework-, DOM-, Node.js- oder npm-Pakettypen Ihr lokales Projekt-Setup.
Der Runner verwendet ein Sandbox-iframe für schnelle Snippets. Vermeiden Sie es, nicht vertrauenswürdigen Code auszuführen, und testen Sie echten App-Code in Ihrer normalen Entwicklungsumgebung.
Zitieren Sie diesen Inhalt, diese Seite oder dieses Tool als:
"TypeScript Playground" unter https://MiniWebtool.com/de/typescript-playground/ von MiniWebtool, https://MiniWebtool.com/
by miniwebtool team. Updated: 2026-05-23
MiniWebtool
Wenn Ihnen TypeScript Playground gefällt, können Sie einen Link zu diesem Tool hinzufügen, indem Sie den folgenden Code kopieren / einfügen: