Cómo usar el compilador de TypeScript online
- Escribe o pega TypeScript en el editor, o parte del ejemplo (Restablecer ejemplo lo recupera).
- Pulsa Ejecutar o usa Ctrl + Enter (⌘ + Enter en Mac).
- Tu código se compila a JavaScript. Si el compilador encuentra un error de sintaxis, se muestra con su código de error
TS, la línea y la columna, y no se ejecuta nada. - Si la compilación termina bien, se ejecuta el JavaScript. La salida de
console.logaparece en el panel Salida, y puedes abrir JavaScript generado debajo del editor para ver exactamente lo que produjo el compilador. - En Límite de tiempo, elige 5, 15 o 60 segundos, o pulsa Detener para terminar una ejecución antes de tiempo.
En la primera ejecución, la página descarga el compilador oficial de TypeScript, de unos 3 MB. Tu navegador lo guarda en caché, así que las ejecuciones siguientes empiezan rápido.
La compilación y la ejecución ocurren en un Web Worker de tu navegador. Tu código no se sube ni se almacena en nuestros servidores. El editor guarda tu último código en el almacenamiento local de tu navegador y en ningún otro sitio.
Qué se admite
Esta página usa TypeScript 5.6, el compilador oficial de Microsoft. Apunta a ES2022 y ejecuta el resultado en el motor de JavaScript de tu navegador.
- Toda la sintaxis de TypeScript: anotaciones de tipo, interfaces, alias de tipo, genéricos, tipos unión e intersección, enums, modificadores de acceso,
satisfies,as consty más. - Salida de JavaScript moderno con clases, async/await y encadenamiento opcional sin transformar.
awaitde nivel superior, temporizadores y promesas, igual que en el compilador de JavaScript online.
Limitaciones:
- Solo transpila. El compilador elimina los tipos e informa de los errores de sintaxis, pero no hace una comprobación de tipos completa. Código como
const n: number = "text"se compila y se ejecuta. Usatsc --noEmito tu editor cuando necesites errores de tipos semánticos. - Sin DOM: el código se ejecuta en un worker, así que
documentywindowno están disponibles. - Sin importaciones: no se pueden usar paquetes de npm, sentencias
importni APIs de Node.js.
Referencia rápida de TypeScript
type Shape =
| { kind: "circle"; r: number }
| { kind: "rect"; w: number; h: number };
function area(s: Shape): number {
switch (s.kind) {
case "circle": return Math.PI * s.r ** 2;
case "rect": return s.w * s.h;
}
}
function first<T>(items: T[]): T | undefined {
return items[0];
}
const shapes: Shape[] = [{ kind: "circle", r: 1 }, { kind: "rect", w: 2, h: 3 }];
console.log(shapes.map(area)); // [3.141592653589793, 6]
console.log(first(shapes)?.kind);| Concepto | Sintaxis |
|---|---|
| Variable con tipo | let count: number = 0; |
| Interfaz | interface User { id: number; name?: string } |
| Tipo unión | type Id = string | number; |
| Función genérica | function wrap<T>(v: T): T[] { return [v]; } |
| Array de solo lectura | const xs: readonly number[] = [1, 2]; |
| Enum | enum Dir { Up, Down } |
Consejos
- Abre JavaScript generado para aprender cómo se compilan características como los enums, las propiedades de parámetro y los campos de clase. Es una forma rápida de entender qué hace TypeScript en tiempo de ejecución.
- Recuerda que los tipos desaparecen en tiempo de ejecución. Para validar datos externos (como un JSON analizado), escribe comprobaciones en tiempo de ejecución o guardas de tipo como
function isUser(x: unknown): x is User. - ¿Necesitas ordenar la salida antes de copiarla a un proyecto? Pégala en el formateador y minificador de JavaScript.
TS1005: ';' expected significa que no se pudo analizar el código. Corrige la línea y la columna que se muestran en la salida y vuelve a ejecutar.Preguntas frecuentes
¿Comprueba los tipos de mi código?
No. Usa el modo de transpilación del compilador, que solo informa de errores de sintaxis. Eso lo mantiene rápido y ligero, pero no se notifican las discrepancias de tipos. Para una comprobación completa, ejecuta tsc en local o usa un editor con el servicio de lenguaje de TypeScript.
¿Qué diferencia hay entre TypeScript y JavaScript?
TypeScript es JavaScript con tipos estáticos opcionales. Los navegadores no pueden ejecutar TypeScript directamente, así que primero se compila a JavaScript simple eliminando los tipos y transformando algunas características exclusivas de TypeScript, como los enums. Puedes ver el resultado de ese paso en esta página.
¿Qué versión de TypeScript se usa?
TypeScript 5.6, con ES2022 como destino de salida.
¿Puedo importar bibliotecas?
No. Cada ejecución compila y ejecuta un único archivo sin resolución de módulos, así que no se admiten sentencias import ni paquetes de npm. Mira todas nuestras herramientas para desarrolladores para ver utilidades relacionadas.
Actualizado