Empezar a crear

Playcode Classic

Playground de TypeScript

Este playground de TypeScript ejecuta TypeScript online, en una página en vivo en tu navegador. Los errores de tipo se subrayan mientras escribes, los paquetes de npm llegan con sus tipos y los componentes .tsx de React se renderizan en la vista previa. No tienes que configurar nada ni crear una cuenta para empezar; inicia sesión para guardar y compartir. Forma parte de Playcode Classic, las herramientas de código gratuitas de Playcode.

Abrir el playground

Gratis. No necesitas cuenta para empezar.

En el arenero de un parque infantil, Play empuja un gran bloque cuadrado hacia el agujero redondo de un enorme juego de madera para encajar formas; no entra, y una línea ondulada roja brilla bajo el agujero. Un desarrollador, sentado en el borde del arenero, se ríe frente a su laptop.

Los errores de tipo aparecen mientras escribes

El editor revisa tus tipos con TypeScript 5.9 y subraya lo que está mal; pasa el cursor por encima para ver el motivo. La revisión nunca bloquea una ejecución, así que puedes probar una idea antes de tiparla por completo.

¿Prefieres describir un sitio web en vez de programarlo? Usa el creador de sitios web con IA de Playcode
Sobre la arena hay una fila de bloques de madera como una línea de código, todos cubos menos un triángulo; Play, con una tiza roja en la mano, trazó una línea ondulada bajo el triángulo, y el desarrollador lo señala desde el borde del arenero.

Los paquetes llegan con sus tipos

Importa un paquete y el editor te ofrece instalarlo desde npm. Sus definiciones de tipos vienen incluidas, así que el autocompletado conoce cada función y el verificador de tipos, cada argumento.

En una mesa de pícnic, el desarrollador coloca una herramienta nueva en el único hueco de espuma de un maletín abierto que le queda exacto, y Play, sobre la mesa a su lado, junta las manos encantado.

¿Tienes un archivo .tsx? Mira cómo se renderiza.

Abre la plantilla de React con TypeScript, pega tu componente en un archivo y renderízalo desde index.tsx. Aparece en la vista previa, y sus botones funcionan.

Abre la plantilla de React con TypeScript
El desarrollador gira la manivela de una gran caja sorpresa y de ella sale disparada, sobre su resorte, una pequeña tarjeta web con una imagen y un botón naranja fuego, mientras Play mira encantado.

¿El playground oficial o este?

Usa el playground oficial de TypeScript para leer el JavaScript compilado y probar otras versiones y opciones del compilador.

Usa este cuando tu TypeScript necesite una página, paquetes o React:

  • Una página en vivo con HTML y CSS
  • Paquetes de npm, con sus tipos
  • React y .tsx
  • Varios archivos que se importan entre sí
  • Un enlace para compartir, y alguien que edite contigo
  • El chat de IA, para preguntas sobre tu código

Parte de Playcode Classic

Playcode nació en 2016 como un entorno de programación en el navegador. Este playground es una de sus herramientas de código gratuitas, a las que hoy llamamos Playcode Classic.

Hoy, Playcode es una plataforma de IA para crear y poner en marcha sitios web y apps.

Descubre el creador de sitios web con IATodas las herramientas de Playcode Classic
Play está junto a la puerta abierta de un viejo parque infantil y muestra lo que hay al otro lado: un cohete listo en su plataforma de lanzamiento.

Preguntas frecuentes

  • ¿Qué es un playground de TypeScript?

    Un sandbox de TypeScript, o TS playground: un lugar para escribir TypeScript y ejecutarlo al instante, sin configurar un proyecto ni un compilador. Este ejecuta tu código en una página en vivo en tu navegador y revisa tus tipos mientras escribes.

  • ¿Este editor de TypeScript online es gratis?

    Sí. Escribir y ejecutar código es gratis, y no necesitas cuenta. Para guardar y compartir necesitas una cuenta gratuita, que guarda hasta tres proyectos, públicos o privados; el chat de IA consume créditos.

  • ¿Qué versión de TypeScript usa?

    El editor revisa tu código con TypeScript 5.9. Para ejecutarlo, esbuild lo compila a JavaScript sin revisar los tipos, así que un error de tipo nunca detiene una ejecución.

  • ¿Revisa los tipos como tsc?

    Sí. Ejecuta el propio verificador de TypeScript mientras escribes y subraya los errores, con el modo strict activado y strictNullChecks desactivado.

  • ¿Puedo ver el JavaScript compilado?

    Todavía no. Para leer el JavaScript que genera TypeScript, usa el playground oficial de TypeScript.

  • ¿Puedo usar paquetes de npm?

    Sí. Importa un paquete y el editor te ofrece instalarlo desde npm, con sus definiciones de tipos.

  • ¿Cómo abro un archivo .tsx online?

    Abre la plantilla de React con TypeScript, pega tu componente en un archivo y renderízalo desde index.tsx. Aparece en la vista previa, así que el playground también sirve como visor de TSX online.

  • ¿Puedo abrir un archivo .tsx en mi teléfono?

    Sí, en el navegador de tu teléfono, de la misma forma. El código largo es más cómodo en una pantalla más grande.

  • ¿Es compatible con React y JSX?

    Sí. Los archivos .tsx y .jsx se compilan en la vista previa. Empieza con la plantilla de React con TypeScript.

  • ¿Este playground es parte de Playcode?

    Sí. Este playground forma parte de Playcode Classic, las herramientas de código gratuitas de Playcode. Playcode nació en 2016 como un entorno de programación en el navegador. Hoy es una plataforma de IA para crear y poner en marcha sitios web y apps.

Más herramientas de código gratuitas

Escribe un tipo. Míralo funcionar.

Abrir el playground
Un cohete espera con la puerta abierta y un asiento libre, y Play te invita a subir. Muy arriba, otro cohete se aleja.