WebTutoriales

Introducción a TypeScript

Qué es TypeScript y en qué se diferencia de JavaScript. Ventajas e inconvenientes del lenguaje.

Introducción

¿Qué es TypeScript?

TypeScript es un lenguaje de programación de código abierto creado por Microsoft en el 2012 que se basa en JavaScript. Concretamente es un superconjunto tipado de JavaScript que ha ganado una gran reputación entre programadores por su capacidad para mejorar la calidad y la eficiencia del código. A medida que la complejidad de las aplicaciones web y de software ha aumentado, TypeScript ha surgido como una herramienta crucial para desarrolladores de todos los niveles de habilidad.

¿En qué se diferencia con JavaScript?

La distinción principal entre TypeScript y JavaScript radica en su naturaleza tipada. Mientras que JavaScript es un lenguaje de programación de tipado dinámico, lo que significa que no se requiere especificar los tipos específicos de datos para las variables, TypeScript introduce el concepto de tipado estático. Esto permite declarar tipos de datos para variables, lo que conduce a una detección temprana de errores y una mejor comprensión del código durante el tiempo de desarrollo.

Ejemplo de código en JavaScript:

function sumar(numero) {
  return 2 + numero;
}

let resultado = sumar(2);
console.log(resultado);

El mismo ejemplo en TypeScript:

function sumar(numero: Number): Number {
  return 2 + numero;
}

let resultado: Number = sumar(2);
console.log(resultado);

¿Se puede usar TypeScript directamente en el navegador?

Su utilización directa en el navegador no es posible debido a que los navegadores sólo interpretan y ejecutan código JavaScript. Para poder usarlo hay que ejecutar un proceso de transpilación, que consiste en convertir el código TypeScript a JavaScript mediante el compilador de TypeScript tsc. Frameworks como React o Vue ofrecen la opción de crear proyectos usando TypeScript y ya incluyen este compilador por defecto. Pero si deseas usar el compilador desde la línea de comandos puedes seguir los siguientes pasos:

Instalación del compilador TypeScript:

Primero, es necesario tener Node.js instalado, ya que TypeScript se instala a través de npm (Node Package Manager). Usando el siguiente comando en la terminal, se puede instalar TypeScript globalmente:

npm install -g typescript

Escribir código en TypeScript:

Se escribe el código en archivos con extensión .ts. Por ejemplo, se puede tener un archivo ejemplo.ts con el siguiente código:

function gritar(nombre: string) {
    return "¡Hola, " + nombre + "!";
}

let mensaje = gritar("Mundo");
console.log(mensaje);

Transpilación a JavaScript:

Una vez que se tiene el código en TypeScript, se utiliza el compilador tsc para convertirlo a JavaScript. En la terminal, se ejecuta el siguiente comando:

tsc ejemplo.ts

Esto generará un nuevo archivo llamado ejemplo.js, que contendrá el código JavaScript equivalente al código TypeScript original.

Uso del código transpilado en el navegador:

El archivo JavaScript resultante ejemplo.js puede ser enlazado a un archivo HTML y usado en un navegador como cualquier otro script JavaScript:

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo TypeScript en Navegador</title>
</head>
<body>
    <script src="ejemplo.js"></script>
</body>
</html>

Al cargar la página HTML en un navegador, el código JavaScript transpilado a partir de TypeScript será ejecutado.

¿Vale la pena adoptar TypeScript?

La respuesta corta es sí, pero como en cualquier elección depende de nuestro objetivo y situación. Los lenguajes evolucionan con el tiempo y hay muchos factores a tener en cuenta, desde la experiencia de los desarrolladores de nuestro equipo, el tamaño del mismo, el tipo de aplicación a desarrollar, etc. A continuación mostramos las ventagas e inconvenientes principales a considerar de forma general:

Ventajas de usar TypeScript:

Tipado estático: TypeScript permite la declaración de tipos de datos, lo que ayuda a detectar errores en tiempo de compilación, mejorando la calidad del código y facilitando su mantenimiento.
Mejora la productividad: Al proporcionar información más clara y detallada sobre el código, TypeScript ofrece un entorno de desarrollo más sólido, lo que facilita la refactorización, la comprensión y la colaboración en proyectos grandes.
Mayor legibilidad y documentación: La introducción de tipos hace que el código sea más legible y autodocumentado, facilitando la comprensión del propósito y la funcionalidad de cada parte del programa.
Integración con herramientas de desarrollo: TypeScript se integra bien con herramientas de desarrollo como IDEs, editores de texto y herramientas de depuración, proporcionando una experiencia de desarrollo más eficiente y ágil.
Compatibilidad con JavaScript: Al ser un superconjunto de JavaScript, TypeScript es compatible con el código JavaScript existente, permitiendo una transición gradual hacia su adopción.

Inconvenientes de usar TypeScript:

Curva de aprendizaje inicial: Para aquellos no familiarizados con el tipado estático, puede llevar tiempo adaptarse a la sintaxis y las reglas de TypeScript.
Necesidad de compilación: El proceso de transpilar código TypeScript a JavaScript añade una capa adicional al flujo de trabajo, lo que puede ser considerado como un paso adicional en comparación con el desarrollo directo en JavaScript.
Posible sobrecarga de complejidad: En algunos casos, el uso excesivo de tipos puede aumentar la complejidad del código, especialmente si no se maneja adecuadamente, lo que puede llevar a una sobrecarga cognitiva y dificultar la comprensión del código.
Mayor esfuerzo inicial en pequeños proyectos: En proyectos pequeños o scripts simples, el beneficio de usar TypeScript puede no ser tan evidente, lo que podría llevar a un esfuerzo adicional sin una clara ventaja percibida.