TypeScript a JavaScript
Pega TypeScript o TSX y obtén JavaScript legible en milisegundos: se eliminan las anotaciones de tipo, las interfaces y las importaciones de tipos, mientras tu código, tus comentarios y tu formato quedan como estaban. Mantén JSX para un archivo .jsx o compílalo para React.
Última actualización:
Cómo usar TypeScript a JavaScript
- Pega tu código TypeScript o TSX, sube un archivo .ts/.tsx o haz clic en Ejemplo.
- Elige la salida JSX: mantener JSX para un archivo .jsx, o compilarlo a React.createElement o al runtime automático.
- Elige el destino y el formato de módulos: sintaxis moderna o ES2019, módulos ES o CommonJS.
- Lee el JavaScript a la derecha; se actualiza mientras escribes y muestra los errores de sintaxis con su línea.
- Copia o descarga el resultado como archivo .js o .jsx.
Qué se elimina y qué se compila
| TypeScript | Salida JavaScript |
|---|---|
let n: number = 1 | let n = 1 |
interface User { … }, type Id = string | Se elimina por completo |
import type { X } from './x' | Se elimina; también se quitan las importaciones usadas solo como tipos |
function f<T>(x: T): T | function f(x) |
value as string, obj!, x satisfies T | value, obj, x |
constructor(private db: Db) {} | constructor(db) { this.db = db; } |
enum Dir { Up, Down } | Un objeto simple con Dir.Up === 0 y mapeo inverso Dir[0] === "Up" |
public, private, readonly, abstract, declare | Se eliminan los modificadores |
Ejemplo
// TypeScript
export function total(items: { price: number; qty?: number }[]): number {
return items.reduce((sum, i) => sum + i.price * (i.qty ?? 1), 0);
}
// JavaScript
export function total(items) {
return items.reduce((sum, i) => sum + i.price * (i.qty ?? 1), 0);
}
¿Quitar tipos o compilar?
La mayoría de las herramientas actuales de TypeScript, como esbuild, Babel, SWC, Vite y Sucrase, convierten TypeScript quitando los tipos archivo por archivo, sin comprobar los tipos. Eso es lo que hace esta herramienta, y por eso es rápida y mantiene tu código legible. El compilador oficial tsc también comprueba los tipos y puede transformar el código para destinos muy antiguos como ES5, lo que requiere funciones auxiliares y cambia mucho más el código. Si solo quieres la versión JavaScript de un archivo, por ejemplo para pegarla en la consola del navegador, en un CodePen o en un proyecto que no usa TypeScript, quitar los tipos es la opción más limpia.
- Para un archivo con JSX, elige Mantener JSX para obtener un archivo
.jsxque puedes añadir a un proyecto de React. - Elige CommonJS para scripts antiguos de Node.js que usan
require()en lugar deimport. - Las funciones flecha genéricas en TSX necesitan una coma final o una restricción, como
<T,>(x: T) => x, para que no se interpreten como etiquetas JSX.
Preguntas frecuentes
¿Cómo convierto TypeScript a JavaScript?
Pega el código en el cuadro de la izquierda. El convertidor lo analiza y elimina todo lo que solo existe para el verificador de tipos: anotaciones como : string, interfaces, alias de tipo, parámetros genéricos, conversiones con as y satisfies, aserciones no nulas (!) y sentencias import type. El código restante es JavaScript válido.
¿Comprueba mis tipos?
No. Igual que Babel, esbuild y Sucrase en un proceso de compilación, solo elimina los tipos y no informa de errores de tipo. Usa tsc --noEmit o tu editor para comprobar los tipos. Los errores de sintaxis, como un corchete que falta, se muestran con su línea y columna.
¿Qué diferencia hay entre mantener JSX y compilarlo?
Mantener JSX convierte .tsx en .jsx: el marcado se queda como <div>…</div> para que lo procese un bundler. Clásico compila cada elemento a llamadas React.createElement(...), que se ejecutan directamente en el navegador con React cargado. Automático usa el runtime de React 17+ y añade una importación desde react/jsx-runtime.
¿Qué destino ES debo elegir?
Moderno mantiene la sintaxis que escribiste, que entienden todos los navegadores actuales y Node.js 14+. ES2019 reescribe el encadenamiento opcional (a?.b), el operador de fusión nula (a ?? b) y los campos de clase con equivalentes más antiguos para entornos heredados.
¿Qué pasa con los enums?
Los enums de TypeScript tienen valores en tiempo de ejecución, así que se compilan a un objeto JavaScript simple con las mismas claves y valores. Cada archivo se convierte por separado, como con la opción isolatedModules, así que los const enums se emiten como enums normales.
¿Se sube mi código a algún sitio?
No. El compilador Sucrase se descarga una vez y luego se ejecuta por completo en tu navegador, así que tu código fuente nunca sale de tu dispositivo.
¿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.
Herramientas relacionadas
Ver todas las de Conversores de datos y formatos de archivo →