Playground de TypeScript
Escribe, compila, verifica tipos y ejecuta TypeScript en tu navegador con diagnósticos en vivo, salida de JavaScript, controles de modo estricto, ejemplos rápidos y una consola aislada.
Escribe, compila, verifica tipos y ejecuta TypeScript en tu navegador con diagnósticos en vivo, salida de JavaScript, controles de modo estricto, ejemplos rápidos y una consola aislada.
'; 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 = 'Ejecuta el JavaScript compilado para ver la salida de la consola aquí.'; }); 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 + ' listo'; setStatus('ready', 'Compilador listo'); compileNow(); return; } if (attempt > 80) { compilerStateEl.textContent = 'Compilador no disponible'; setStatus('error', 'Compilador no disponible'); diagnosticsEl.innerHTML = '
'; return; } setTimeout(function () { waitForCompiler(attempt + 1); }, 150); } waitForCompiler(0); })();
Tu bloqueador de anuncios impide que mostremos anuncios
MiniWebtool sigue siendo gratis gracias a los anuncios. Si esta herramienta te ayudó, apóyanos actualizando para navegar sin anuncios y tener más usos diarios, o permite MiniWebtool.com y recarga.
Este TypeScript Playground te permite probar un fragmento rápidamente sin abrir un proyecto completo. Ejecuta el compilador TypeScript en tu navegador, muestra diagnósticos de verificación de tipos con números de línea, emite JavaScript y puede ejecutar salidas sencillas en una consola en sandbox.
La herramienta está diseñada para comprobaciones cotidianas de TypeScript: validar el estrechamiento de uniones, probar tipos auxiliares genéricos, comparar targets del compilador, confirmar el comportamiento del strict mode y revisar el JavaScript que emite TypeScript. Es útil para aprender, depurar un ejemplo compacto, preparar una respuesta o comprobar una pequeña refactorización antes de llevarla a un proyecto.
El compilador del navegador usa un archivo de declaración integrado compacto para objetos JavaScript comunes como arrays, strings, records, JSON, console y timers. Esto mantiene el playground rápido y autocontenido para los fragmentos. Si tu código depende de React, Node.js, DOM APIs o declaraciones específicas de paquetes, confirma el resultado final dentro de tu proyecto con su tsconfig.json real y los paquetes de tipos instalados.
Usa el playground cuando quieras aislar un error de tipo de una base de código más grande, comparar cómo el strict mode cambia los diagnósticos, explicar un concepto de TypeScript a un compañero o comprobar cómo un pequeño fragmento se compila a JavaScript. Los ejemplos integrados cubren uniones discriminadas, auxiliares de record genéricos, el operador satisfies y errores de tipo intencionales para que puedas ver estados de compilador tanto correctos como con fallos.
Sí. Construye un programa TypeScript en el navegador y reporta los diagnósticos del compilador, incluidos errores de tipo, errores de sintaxis y mensajes de opciones del compilador.
Sí. Los controles principales cubren target de JavaScript, salida de Module, strict mode, emisión de declaraciones y noUncheckedIndexedAccess.
Este playground utiliza intencionalmente una biblioteca de tipos integrada compacta. Para tipos de framework, DOM, Node.js o paquetes npm, usa la configuración de tu proyecto local.
El ejecutor utiliza un iframe en sandbox para fragmentos rápidos. Evita ejecutar código no confiable y prueba el código real de las aplicaciones dentro de tu entorno de desarrollo habitual.
Cite este contenido, página o herramienta como:
"Playground de TypeScript" en https://MiniWebtool.com/es/playground-de-typescript/ de MiniWebtool, https://MiniWebtool.com/
by miniwebtool team. Updated: 2026-05-23
MiniWebtool
Si le gusta Playground de TypeScript, considere agregar un enlace a esta herramienta copiando / pegando el siguiente código: