¿Qué es TypeScript? Diferencias con JavaScript

01¿Qué es TypeScript?

La respuesta más corta a qué es TypeScript: JavaScript con información de tipos. En términos técnicos, TypeScript es un superconjunto de JavaScript; todo código JavaScript válido es también código TypeScript válido. Solo se le añaden definiciones de tipos y un compilador que las comprueba.

Los navegadores y Node.js no están diseñados para ejecutar TypeScript directamente. Por eso el código pasa antes por el compilador, se borra la información de tipos y el resultado es JavaScript plano. Es decir, el beneficio de TypeScript se da en el momento del desarrollo; el código que llega al usuario sigue siendo JavaScript.

El lenguaje se presentó por primera vez en 2012 y con el tiempo se ha convertido en una de las herramientas habituales del desarrollo web. Hoy muchas librerías populares se escriben directamente en TypeScript y la mayoría de las herramientas para crear proyectos nuevos ofrecen la opción de TypeScript en primer lugar durante la instalación. Esta difusión significa que lo aprendido se traslada con facilidad a otros proyectos.

Para quien no conoce la base del lenguaje, empezar directamente por TypeScript puede ser difícil. Afianzar primero los conceptos del artículo qué es JavaScript facilita entender qué problema resuelve el sistema de tipos.

02¿Cómo detecta errores la seguridad de tipos?

JavaScript es de tipado dinámico: puede asignar primero un número y luego un texto a una variable y el lenguaje no protesta. En scripts pequeños esta flexibilidad es cómoda; pero en un proyecto de cientos de archivos, darse cuenta de que ha cambiado el dato que espera una función ocurre, la mayoría de las veces, cuando aparece un error en producción.

La seguridad de tipos consiste en definir de antemano la forma de cada dato y rechazar, durante la compilación, los usos que no se ajusten a esa definición. En el ejemplo siguiente, un nombre de campo incorrecto o un tipo erróneo se marcan con una línea roja en el editor antes de ejecutar el código.

interface Siparis {
  id: number;
  musteri: string;
  tutar: number;
  odendi: boolean;
}

function ozetYaz(s: Siparis): string {
  return `${s.musteri} - ${s.tutar.toFixed(2)}`;
}

ozetYaz({ id: 1, musteri: "Ayşe", tutar: 150, odendi: true }); // válido
ozetYaz({ id: 2, musteri: "Can", tutar: "150", odendi: false });
// Error: el tipo 'string' no se puede asignar al tipo 'number'.

Ayuda del editor

La información de tipos no solo detecta errores; también orienta al editor. Se autocompletan los campos que tiene un objeto, al pasar el cursor se ve lo que espera una función y, cuando cambia el nombre de un campo, todos sus usos se actualizan con seguridad. Esta refactorización segura (refactoring) ahorra mucho tiempo en bases de código grandes.

03Diferencias entre TypeScript y JavaScript

La diferencia entre TypeScript y JavaScript no está en el tiempo de ejecución, sino en el proceso de desarrollo. La tabla siguiente compara ambos lenguajes en el uso diario:

04Ventajas de TypeScript

Las ventajas de TypeScript se notan más a medida que el proyecto crece y el equipo aumenta. En un script corto escrito por una sola persona la diferencia es pequeña; en un sistema en el que cinco desarrolladores trabajan durante dos años, es decisiva.

• Detección temprana de errores: las erratas, los campos que faltan y los tipos equivocados se ven antes de ejecutar el código.
• Código que se documenta solo: la entrada y la salida de una función se leen en los tipos; se necesita menos documentación aparte.
• Cambios seguros: el compilador lista todos los archivos afectados por un cambio en el modelo de datos.
• Contrato dentro del equipo: los tipos compartidos entre front-end y back-end aclaran lo que devuelve la API.
• Amplio soporte del ecosistema: React, Next.js, Node.js y la mayoría de las librerías habituales incluyen definiciones de tipos.

También tiene desventajas

TypeScript no es gratis. Añade un paso de compilación y configuración, las definiciones de tipos complejas pueden costar a quien empieza y los tipos any escritos con prisa eliminan en silencio la seguridad de tipos. En proyectos pequeños y de corta vida, esta carga adicional puede superar el beneficio que aporta. Además, algunos paquetes antiguos y abandonados pueden carecer de definiciones de tipos; para ellos puede ser necesario escribirlas a mano.

05¿En qué proyecto elegir TypeScript?

La decisión depende de la vida, el tamaño y el equipo del proyecto. Como regla general, todo software que vaya a mantener más de una persona durante mucho tiempo se beneficia de TypeScript.

En sistemas donde se conectan muchos modelos de datos, como paneles de administración, motores de reservas y flujos de stock y pedidos, las definiciones de tipos son casi el mapa del proyecto. En las soluciones de software a medida, este mapa muestra al instante si una función nueva rompe una pantalla antigua.

En proyectos que se comunican con sistemas externos, como marketplaces, envíos y contabilidad, ocurre algo parecido. Cuando la forma de los datos que devuelve cada servicio se define con tipos, un cambio en el otro lado se detecta mucho antes; esto reduce las sorpresas en los trabajos de integraciones.

Un software hotelero, donde los datos de habitación, fecha, precio y huésped se usan a la vez en muchas pantallas, o un software de anuncios inmobiliarios, donde se entrelazan anuncios, filtros y roles de usuario, son buenos ejemplos de este tipo de proyectos. Cuando cambia el nombre o el tipo de un campo, el compilador lista de una vez todos los informes, formularios y servicios que lo usan; el equipo completa el cambio sin dejar ningún rincón.

• TypeScript tiene sentido: aplicaciones con muchas pantallas, paneles, productos de larga vida, capas de API e integración.
• No es obligatorio: webs de presentación de una sola página, páginas de campaña cortas, scripts de automatización de unas pocas líneas.

06El coste de migrar a TypeScript

Trasladar a TypeScript un proyecto JavaScript existente no es algo que deba hacerse de una sola vez. Como el compilador puede ejecutar a la vez archivos JavaScript y TypeScript, es posible una migración gradual.

Los factores principales que determinan el coste son el tamaño de la base de código, la existencia de pruebas, el soporte de tipos de las librerías utilizadas y la experiencia del equipo. En un proyecto con pruebas, la migración avanza con mucha más seguridad; en este tema, nuestro artículo qué son las pruebas de software es un buen complemento.

1. Añada al proyecto el compilador y un archivo de configuración; empiece al principio con reglas laxas.
2. Escriba en TypeScript todos los archivos nuevos.
3. Defina los tipos de los modelos de datos más utilizados.
4. Convierta uno a uno los módulos críticos y ejecute sus pruebas.
5. Cuando la base de código esté lista, active el modo strict para endurecer las reglas.

npm install --save-dev typescript
npx tsc --init
npx tsc --noEmit

07Consejos para aprender TypeScript

Para quienes quieran aprender TypeScript, el mejor método es ir añadiendo poco a poco los tipos a un proyecto JavaScript que ya conozcan. Primero vienen los tipos básicos (string, number, boolean, arrays), después las definiciones interface y type, y luego los tipos union y los generics.

Si desarrolla interfaces, usar TypeScript directamente con React también acelera el aprendizaje; definir con tipos las props de los componentes es un ejercicio muy concreto. Para la parte de React, puede consultar nuestro artículo qué es React.

Para el manual oficial y el entorno de pruebas, la dirección typescriptlang.org es la fuente más fiable. En el área de pruebas del navegador puede ver al instante en qué JavaScript se convierte el código que escribe.