Playground TypeScript
Scrivi, compila, esegui il controllo dei tipi ed esegui TypeScript nel tuo browser con diagnostica in tempo reale, output JavaScript, controlli della modalità rigorosa, esempi rapidi e una console in ambiente isolato (sandbox).
Scrivi, compila, esegui il controllo dei tipi ed esegui TypeScript nel tuo browser con diagnostica in tempo reale, output JavaScript, controlli della modalità rigorosa, esempi rapidi e una console in ambiente isolato (sandbox).
'; 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 = 'Esegui il JavaScript compilato per vedere qui l’output della console.'; }); 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 + ' pronto'; setStatus('ready', 'Compilatore pronto'); compileNow(); return; } if (attempt > 80) { compilerStateEl.textContent = 'Compilatore non disponibile'; setStatus('error', 'Compilatore non disponibile'); diagnosticsEl.innerHTML = '
'; return; } setTimeout(function () { waitForCompiler(attempt + 1); }, 150); } waitForCompiler(0); })();
Il tuo ad blocker ci impedisce di mostrare annunci
MiniWebtool resta gratuito grazie agli annunci. Se questo strumento ti è stato utile, sostienici facendo l’upgrade per navigare senza annunci e avere più utilizzi giornalieri, oppure consenti MiniWebtool.com e ricarica.
Questo TypeScript Playground ti permette di testare uno snippet rapidamente senza aprire un progetto completo. Esegue il compilatore TypeScript nel tuo browser, mostra la diagnostica di controllo dei tipi con i numeri di riga, emette JavaScript e può eseguire output semplici in una console in sandbox.
Lo strumento è progettato per i controlli TypeScript quotidiani: convalidare il narrowing delle unioni, testare tipi helper generici, confrontare i target del compilatore, confermare il comportamento dello strict mode e rivedere il JavaScript emesso da TypeScript. È utile per imparare, eseguire il debug di un esempio compatto, preparare una risposta o verificare un piccolo refactoring prima di portarlo in un progetto.
Il compilatore del browser utilizza un file di dichiarazione integrato compatto per gli oggetti JavaScript comuni come array, string, record, JSON, console e timer. Questo mantiene il playground veloce e autosufficiente per gli snippet. Se il tuo codice dipende da React, Node.js, DOM API o dichiarazioni specifiche di un pacchetto, conferma il risultato finale all’interno del tuo progetto con il suo tsconfig.json reale e i pacchetti di tipi installati.
Usa il playground quando vuoi isolare un errore di tipo da una codebase più grande, confrontare come lo strict mode modifica la diagnostica, spiegare un concetto TypeScript a un collega o verificare come un piccolo snippet viene compilato in JavaScript. Gli esempi integrati coprono le unioni discriminate, gli helper per record generici, l’operatore satisfies ed errori di tipo intenzionali in modo da poter vedere sia stati del compilatore puliti sia con errori.
Sì. Costruisce un programma TypeScript nel browser e riporta la diagnostica dal compilatore, inclusi errori di tipo, errori di sintassi e messaggi delle opzioni del compilatore.
Sì. I controlli principali coprono target JavaScript, output di Module, strict mode, emissione delle dichiarazioni e noUncheckedIndexedAccess.
Questo playground utilizza intenzionalmente una libreria di tipi integrata compatta. Per i tipi di framework, DOM, Node.js o pacchetti npm, usa la configurazione del tuo progetto locale.
L’esecutore utilizza un iframe in sandbox per snippet rapidi. Evita di eseguire codice non attendibile e testa il codice reale delle applicazioni nel tuo normale ambiente di sviluppo.
Cita questo contenuto, pagina o strumento come:
"Playground TypeScript" su https://MiniWebtool.com/it/playground-typescript/ di MiniWebtool, https://MiniWebtool.com/
by miniwebtool team. Updated: 2026-05-23
MiniWebtool
Se ti piace , potresti aggiungere un link a questo strumento copiando / incollando il seguente codice: