Playground TypeScript
Escreva, compile, verifique tipos e execute TypeScript em seu navegador com diagnósticos em tempo real, saída em JavaScript, controles de modo estrito, exemplos rápidos e um console em sandbox.
Escreva, compile, verifique tipos e execute TypeScript em seu navegador com diagnósticos em tempo real, saída em JavaScript, controles de modo estrito, exemplos rápidos e um console em 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 = 'Execute o JavaScript compilado para ver a saída do console aqui.'; }); 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', 'Compilador pronto'); compileNow(); return; } if (attempt > 80) { compilerStateEl.textContent = 'Compilador indisponível'; setStatus('error', 'Compilador indisponível'); diagnosticsEl.innerHTML = '
'; return; } setTimeout(function () { waitForCompiler(attempt + 1); }, 150); } waitForCompiler(0); })();
Seu bloqueador de anúncios está impedindo que mostremos anúncios
O MiniWebtool continua gratuito graças aos anúncios. Se esta ferramenta ajudou você, apoie-nos fazendo upgrade para navegação sem anúncios e mais usos diários, ou permita MiniWebtool.com e recarregue.
Este TypeScript Playground permite testar um trecho rapidamente sem abrir um projeto completo. Ele executa o compilador TypeScript no seu navegador, mostra diagnósticos de verificação de tipos com números de linha, emite JavaScript e pode executar saídas simples em um console em sandbox.
A ferramenta foi projetada para verificações cotidianas de TypeScript: validar a restrição de uniões, testar tipos auxiliares genéricos, comparar targets do compilador, confirmar o comportamento do strict mode e revisar o JavaScript que o TypeScript emite. É útil para aprender, depurar um exemplo compacto, preparar uma resposta ou verificar uma pequena refatoração antes de movê-la para um projeto.
O compilador no navegador usa um arquivo de declaração interno compacto para objetos JavaScript comuns, como arrays, strings, records, JSON, console e timers. Isso mantém o playground rápido e autossuficiente para trechos. Se seu código depende de React, Node.js, DOM APIs ou declarações específicas de pacotes, confirme o resultado final dentro do seu projeto com seu tsconfig.json real e os pacotes de tipos instalados.
Use o playground quando quiser isolar um erro de tipo de uma base de código maior, comparar como o strict mode altera os diagnósticos, explicar um conceito do TypeScript a um colega de equipe ou verificar como um pequeno trecho é compilado para JavaScript. Os exemplos integrados cobrem uniões discriminadas, auxiliares de record genéricos, o operador satisfies e erros de tipo intencionais para que você possa ver estados de compilador limpos e com falhas.
Sim. Ela constrói um programa TypeScript no navegador e relata diagnósticos do compilador, incluindo erros de tipo, erros de sintaxe e mensagens das opções do compilador.
Sim. Os principais controles cobrem target de JavaScript, saída de Module, strict mode, emissão de declarações e noUncheckedIndexedAccess.
Este playground usa intencionalmente uma biblioteca de tipos interna compacta. Para tipos de framework, DOM, Node.js ou pacotes npm, use a configuração do seu projeto local.
O executor usa um iframe em sandbox para trechos rápidos. Evite executar código não confiável e teste código real de aplicações no seu ambiente de desenvolvimento normal.
Cite este conteúdo, página ou ferramenta como:
"Playground TypeScript" em https://MiniWebtool.com/br/playground-typescript/ de MiniWebtool, https://MiniWebtool.com/
by miniwebtool team. Updated: 2026-05-23
MiniWebtool
Se você gosta de Playground TypeScript, considere adicionar um link a essa ferramenta copiando / colando o seguinte código: