Playground TypeScript
Pisz, kompiluj, sprawdzaj typy i uruchamiaj TypeScript w przeglądarce z diagnostyką na żywo, wynikowym kodem JavaScript, kontrolą trybu ścisłego, szybkimi przykładami i konsolą w piaskownicy.
Pisz, kompiluj, sprawdzaj typy i uruchamiaj TypeScript w przeglądarce z diagnostyką na żywo, wynikowym kodem JavaScript, kontrolą trybu ścisłego, szybkimi przykładami i konsolą w piaskownicy.
'; 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 = 'Uruchom skompilowany JavaScript, aby zobaczyć tutaj wyjście konsoli.'; }); 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 + ' gotowy'; setStatus('ready', 'Kompilator gotowy'); compileNow(); return; } if (attempt > 80) { compilerStateEl.textContent = 'Kompilator niedostępny'; setStatus('error', 'Kompilator niedostępny'); diagnosticsEl.innerHTML = '
'; return; } setTimeout(function () { waitForCompiler(attempt + 1); }, 150); } waitForCompiler(0); })();
Twój bloker reklam uniemożliwia nam wyświetlanie reklam
MiniWebtool jest darmowy dzięki reklamom. Jeśli to narzędzie Ci pomogło, wesprzyj nas, przechodząc na wersję bez reklam z większą liczbą dziennych użyć, albo zezwól na MiniWebtool.com i odśwież stronę.
Ten TypeScript Playground pozwala szybko przetestować fragment kodu bez otwierania pełnego projektu. Uruchamia kompilator TypeScript w przeglądarce, pokazuje diagnostykę sprawdzania typów z numerami linii, emituje JavaScript i może uruchamiać proste wyjście w konsoli w piaskownicy.
Narzędzie jest przeznaczone do codziennych kontroli TypeScript: walidacji zawężania unii, testowania generycznych typów pomocniczych, porównywania celów kompilatora, potwierdzania zachowania trybu strict oraz przeglądania kodu JavaScript emitowanego przez TypeScript. Jest przydatne do nauki, debugowania zwartego przykładu, przygotowania odpowiedzi lub sprawdzenia małego refaktoryzacji przed przeniesieniem jej do projektu.
Kompilator w przeglądarce używa kompaktowego wbudowanego pliku deklaracji dla typowych obiektów JavaScript, takich jak tablice, łańcuchy znaków, rekordy, JSON, console i timery. Dzięki temu Playground jest szybki i samowystarczalny dla fragmentów kodu. Jeśli Twój kod zależy od React, Node.js, DOM APIs lub deklaracji specyficznych dla pakietów, potwierdź końcowy wynik w swoim projekcie z rzeczywistym tsconfig.json i zainstalowanymi pakietami typów.
Używaj Playgroundu, gdy chcesz wyizolować błąd typu z większej bazy kodu, porównać, jak tryb strict zmienia diagnostykę, wyjaśnić koledze z zespołu koncepcję TypeScript lub sprawdzić, jak mały fragment kompiluje się do JavaScript. Wbudowane przykłady obejmują discriminated unions, generyczne pomocniki rekordów, operator satisfies oraz celowe błędy typów, dzięki czemu możesz zobaczyć zarówno poprawne, jak i błędne stany kompilatora.
Tak. Buduje program TypeScript w przeglądarce i raportuje diagnostykę z kompilatora, w tym błędy typów, błędy składni i komunikaty o opcjach kompilatora.
Tak. Główne kontrolki obejmują cel JavaScript, wyjście modułu, tryb strict, emisję deklaracji oraz noUncheckedIndexedAccess.
Ten Playground celowo używa kompaktowej wbudowanej biblioteki typów. W przypadku typów frameworka, DOM, Node.js lub pakietów npm użyj lokalnej konfiguracji projektu.
Runner używa iframe w piaskownicy do szybkich fragmentów. Unikaj uruchamiania niezaufanego kodu i testuj prawdziwy kod aplikacji w normalnym środowisku programistycznym.
Cytuj ten materiał, stronę lub narzędzie w następujący sposób:
"Playground TypeScript" na https://MiniWebtool.com/pl/playground-typescript/ z MiniWebtool, https://MiniWebtool.com/
by miniwebtool team. Updated: 2026-05-23
MiniWebtool
Jeśli podoba Ci się Playground TypeScript, rozważ połączenie tego narzędzia, kopiując i wklejając następujący kod: