TypeScript vs JavaScript: qué cambia y qué genera tsc | We.Inc
Compara lado a lado TypeScript y el JavaScript que genera al compilar, descubre qué detecta el comprobador de tipos, por qué los tipos desaparecen al ejecutar y cuándo basta con JavaScript puro.
TypeScript es JavaScript más un sistema de tipos. Escribes JavaScript normal con anotaciones de tipo opcionales, y el compilador tsc las comprueba y luego las elimina para producir JavaScript puro. Los navegadores y Node ejecutan ese resultado, así que los tipos nunca existen en tiempo de ejecución. La ventaja es detectar errores mientras editas, no un código más rápido.
Lado a lado
Pregunta
JavaScript
TypeScript
¿Se ejecuta directamente en el navegador?
Sí
No, antes se compila o se le quitan los tipos para pasarlo a JavaScript
¿Cuándo se detectan los errores de tipos?
Cuando se ejecuta el código
Mientras editas y cuando tsc comprueba
Extensiones de archivo
.js, .mjs, .jsx
.ts, .tsx (.d.ts para declaraciones)
Tipos en tiempo de ejecución
Solo valores
Ninguno, las anotaciones se borran
¿Necesita un paso de build?
Opcional
Sí para comprobar; un eliminador de tipos o un bundler para ejecutarlo
¿El JavaScript válido es una entrada válida?
Sí
Sí, aunque el comprobador puede señalar errores
Elige un ejemplo abajo para ver un archivo TypeScript junto al JavaScript que tsc escribió para él. La mayoría de las veces, el resultado es tu código sin las anotaciones. Algunas funciones, como los enums, generan código real, y esa diferencia importa al elegir herramientas.
Elige un ejemplo: anotaciones simples, una interface, un enum, un const enum o un error de tipos.
Lee el código TypeScript a la izquierda y el JavaScript generado a la derecha.
Revisa la nota bajo cada par para ver qué comprobó el compilador y qué llegó al resultado.
Copia cualquiera de los dos lados para probarlo en tu propio proyecto.
Añade un tsconfig.json con strict en true desde el primer día. Activarlo más tarde en un código grande hace aparecer cientos de errores de golpe.
Al migrar, cambia los archivos de .js a .ts de uno en uno. Activar allowJs permite que ambos tipos de archivo convivan en el mismo proyecto durante el cambio.
Recuerda que el JSON que llega de un servidor no tiene tipos hasta que lo compruebas. Una anotación de tipo en datos obtenidos es una promesa al compilador, no una comprobación en tiempo de ejecución.
Usa un eliminador de tipos rápido (Vite, esbuild o el type stripping de Node) para ejecutar el código, y mantén tsc --noEmit como comprobación aparte en tu editor y en CI.
Preguntas frecuentes
¿TypeScript es un lenguaje distinto de JavaScript?
Es un superconjunto. Todo programa TypeScript se convierte en JavaScript, y TypeScript añade sintaxis para describir la forma de los valores. Aprende JavaScript primero; los tipos van encima de él, no lo sustituyen.
¿TypeScript hace que mi sitio sea más rápido?
No. Las anotaciones se eliminan antes de ejecutar el código, así que el navegador ejecuta el mismo JavaScript que habrías escrito a mano. Las ventajas son menos bugs que lleguen a los usuarios y refactorizaciones más seguras.
¿tsc se niega a compilar cuando hay un error de tipos?
No por defecto. tsc informa del error y aun así escribe el archivo .js, lo que permite una migración gradual. Activa noEmitOnError si quieres que una comprobación fallida bloquee el resultado.
¿Puede Node ejecutar archivos .ts sin un paso de build?
Las versiones recientes de Node eliminan la sintaxis de tipos borrable y ejecutan el archivo, con el type stripping activado por defecto desde v23.6.0 y v22.18.0. Node no comprueba tipos, y rechaza la sintaxis que necesita generar código, como los enums.
¿Cuándo es mejor opción JavaScript puro?
Los scripts pequeños, los prototipos rápidos y las páginas con pocas líneas de interactividad rara vez compensan la configuración. En cuanto un proyecto tiene varios archivos, varias personas o datos que pasan entre módulos, el comprobador empieza a ahorrar tiempo de verdad.
Qué hace realmente tsc
El compilador tiene dos tareas que a menudo se confunden. Primero comprueba tipos: lee cada archivo, deduce el tipo de cada valor e informa de todo lo que no encaja. Después genera código: escribe JavaScript sin la sintaxis de tipos y, si lo pides, reescribe la sintaxis moderna para entornos más antiguos.
Las herramientas modernas suelen separar esas tareas. Un bundler como Vite elimina los tipos rápidamente sin comprobar nada, y tsc --noEmit ejecuta la comprobación completa por separado en tu editor o en CI. Si solo ejecutas el bundler, los errores de tipos pueden llegar a producción.
Los tipos se borran, así que valida los datos reales
Como las anotaciones desaparecen, TypeScript no puede impedir que un servidor envíe un string donde declaraste un number. Escribir const user: User = await res.json() solo le dice al comprobador que confíe en ti.
En los bordes de tu programa, como la entrada de formularios, las respuestas de fetch y el almacenamiento local, comprueba el valor en tiempo de ejecución con una pequeña función de guarda o una librería de esquemas, y deja que el comprobador lleve esa garantía hacia dentro.
Funciones que no solo se borran
Los enums, los namespaces con código, las parameter properties y los alias import = producen su propio JavaScript. TypeScript 5.8 añadió la opción erasableSyntaxOnly, que marca estos casos como error, para que un archivo funcione con eliminadores de tipos que solo borran anotaciones.
Si piensas ejecutar archivos .ts directamente en Node o con otro eliminador de tipos, usa uniones de literales de string y objetos as const en lugar de enums. La guía de enums de este sitio muestra ambos lado a lado.
Añadir TypeScript a un proyecto JavaScript
Instalar y crear un tsconfig
Instala el compilador en local, escribe un tsconfig.json inicial y ejecuta una comprobación sin escribir archivos.
allowJs permite que los archivos .js antiguos convivan con los .ts nuevos durante una migración; noEmit deja la generación de código a tu bundler.
Comprobar datos que el compilador no puede ver
Una guarda en tiempo de ejecución que acota el tipo
La función comprueba el valor de verdad, y el tipo de retorno le dice al compilador lo que demostró.
Anotaciones
Los tipos del parámetro y del retorno se comprueban y luego se borran. El cuerpo queda intacto.
Interface
Una interface no produce ningún resultado. Solo existe para el comprobador.
Enum
Un enum normal se convierte en un objeto real con mapeo inverso, así que esto es código generado, no sintaxis borrada.
const enum
tsc sustituye los miembros de un const enum por números en línea y deja un comentario con el nombre original.
Error de tipos
tsc informa: Argument of type 'string' is not assignable to parameter of type 'number'. Aun así escribe el archivo, salvo que esté activado noEmitOnError.