TypeScript Playground
Escribe TypeScript y recibe los errores de tipos mientras escribes, directamente del compilador oficial; luego ve el JavaScript que genera para el target elegido y ejecútalo con una consola integrada. Todo funciona en tu navegador.
Última actualización:
Cómo usar TypeScript Playground
- Escribe o pega TypeScript en el editor, o elige un ejemplo de la lista.
- Fíjate en la línea de estado y en la pestaña Errores: los errores de tipos aparecen en un momento, con números de línea en rojo en el margen del editor.
- Elige el target y el formato de módulo para ver cómo cambia el JavaScript generado, y activa o desactiva el modo estricto o los tipos del DOM.
- Haz clic en Ejecutar (o pulsa Ctrl+Intro) para ejecutar el código; la salida aparece en la pestaña Consola.
- Copia o descarga el JavaScript, consulta la pestaña .d.ts o haz clic en Copiar enlace para compartir el código.
Cómo se convierte TypeScript en JavaScript
Compilar TypeScript hace dos cosas independientes. El comprobador de tipos lee tu código e informa de incoherencias, como pasar un string donde se espera un number. El emisor elimina las anotaciones de tipo y, según el target, reescribe la sintaxis más nueva en JavaScript más antiguo. Como son procesos separados, el JavaScript se genera aunque haya errores de tipos, por eso este playground puede mostrar la salida y ejecutarla mientras la pestaña Errores enumera los problemas.
Opciones del compilador en este playground
| Opción | Equivalente en tsconfig.json | Efecto |
|---|---|---|
| Target | "target": "ES2020" | Versión de JavaScript de la salida y tipos de la biblioteca integrada (Promise, Map, Array.prototype.flat…) |
| Módulo | "module": "ESNext" | Mantiene import/export, o los convierte en require/exports (CommonJS) |
| strict | "strict": true | Activa strictNullChecks, noImplicitAny, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization y más |
| noUnused… | "noUnusedLocals", "noUnusedParameters" | Informa de variables, imports y parámetros que nunca se usan (pon _ delante de un parámetro para permitirlo) |
| Tipos del DOM | "lib": ["ES2020", "DOM", "DOM.Iterable"] | Añade definiciones de tipos para document, window, fetch y otras APIs del navegador |
Códigos de error comunes
| Código | Mensaje (resumido) | Solución habitual |
|---|---|---|
| TS2322 | Type 'X' is not assignable to type 'Y' | Cambia el valor, amplía el tipo declarado o convierte el valor (por ejemplo Number(id)) |
| TS2345 | Argument of type 'X' is not assignable to parameter of type 'Y' | Pasa el tipo esperado o ajusta la firma de la función |
| TS2339 | Property 'x' does not exist on type 'Y' | Añade la propiedad a la interfaz, o estrecha una unión con in o una comprobación discriminante |
| TS2531 / TS18047 | Object is possibly 'null' | Comprueba primero si es null, usa el encadenamiento opcional a?.b o un valor por defecto con ?? |
| TS7006 | Parameter 'x' implicitly has an 'any' type | Anota el parámetro: (x: string) => … |
| TS2304 | Cannot find name 'x' | Declara la variable, corrige la ortografía o activa los tipos del DOM para las variables globales del navegador |
| TS2307 | Cannot find module 'x' | Los imports de paquetes npm no están disponibles en un playground de un solo archivo |
Consejo: cuando un error de tipo sea difícil de leer, asigna el valor a una variable con el tipo que esperas (const check: Expected = value;) y lee el mensaje más específico que aparece.
Preguntas frecuentes
¿Es el compilador real de TypeScript?
Sí. La página carga el paquete oficial typescript (versión 5.6.3) y comprueba los tipos de tu código con la misma API del compilador que usan tsc y los editores, con las definiciones de la biblioteca estándar del target que elijas. La primera carga descarga unos pocos megabytes; después, la comprobación es instantánea.
¿Por qué se ejecuta mi código aunque tenga errores de tipos?
Los tipos de TypeScript solo existen en tiempo de compilación. El compilador sigue generando JavaScript cuando hay errores de tipos (salvo que se active noEmitOnError), así que el playground ejecuta igualmente el código generado e indica el número de errores en la consola. Corrige los errores para asegurarte de que el código se comporta según sus tipos.
¿Qué cambia la opción target?
El target es la versión de JavaScript en la que debe ejecutarse la salida. ES2020 y posteriores mantienen la sintaxis moderna como el encadenamiento opcional, mientras que ES2015 y ES5 la reescriben en código más antiguo, por ejemplo las clases en funciones en ES5 y las funciones async en helpers con generadores. El target también determina qué APIs integradas conoce el comprobador de tipos.
¿Qué hace el modo estricto?
strict activa una familia de comprobaciones que incluye strictNullChecks, noImplicitAny, strictFunctionTypes y strictPropertyInitialization. Con él, null y undefined deben gestionarse explícitamente y cada valor necesita un tipo conocido. Es la configuración recomendada para proyectos nuevos y aquí está activada de forma predeterminada.
¿Puedo importar paquetes npm o usar el DOM?
No se pueden importar paquetes: el playground comprueba un único archivo, así que importar una biblioteca indica que no se encuentra el módulo. Los tipos del DOM se pueden activar para la comprobación de tipos, pero el botón Ejecutar ejecuta el código en un Web Worker sin página, así que document y window no están disponibles en tiempo de ejecución.
¿Se envía mi código a un servidor?
No. La compilación y la ejecución se hacen en tu navegador. El código solo se guarda en el almacenamiento local de este navegador, y el botón Copiar enlace lo coloca en el propio enlace, después del signo #, que los navegadores no envían a los servidores.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.