Introducción
Durante el desarrollo de aplicaciones Angular utilizaremos TypeScript como lenguaje de programación principal. De hecho, TypeScript es el lenguaje recomendado y utilizado por defecto en los proyectos Angular modernos.
Antes de comenzar a trabajar con Angular, es importante comprender qué es TypeScript, cuáles son sus ventajas y por qué se ha convertido en una herramienta fundamental para el desarrollo de aplicaciones de gran escala.
El problema de JavaScript
JavaScript es un lenguaje de programación flexible y fácil de aprender. Sin embargo, una de sus características es que utiliza tipado dinámico, lo que significa que no es necesario declarar el tipo de dato de una variable.
Por ejemplo:
let nombre = "Felipe";
En este caso, no se especifica explícitamente que nombre es una cadena de texto (string). JavaScript simplemente lo deduce a partir del valor asignado.
Aunque esta flexibilidad puede resultar conveniente, también puede provocar errores difíciles de detectar en aplicaciones grandes.
Consideremos el siguiente ejemplo:
let nombre = "Felipe";
let numero = 2;
function sumar(a, b) {
return a + b;
}
let suma = sumar(nombre, numero);
console.log(suma);
La función sumar parece diseñada para sumar números. Sin embargo, JavaScript permite enviar cualquier tipo de dato como argumento, incluyendo cadenas de texto.
Como consecuencia, pueden producirse comportamientos inesperados que generen errores difíciles de localizar, especialmente en aplicaciones con miles de líneas de código.
¿Qué es TypeScript?
TypeScript es un lenguaje de programación desarrollado por Microsoft que se basa en JavaScript y añade características adicionales para mejorar la productividad y la calidad del código.
Se describe como un superconjunto tipado de JavaScript (typed superset of JavaScript), lo que significa que:
Todo código JavaScript válido también es código TypeScript válido.
Esto facilita enormemente la adopción de TypeScript, ya que no es necesario reaprender completamente un nuevo lenguaje.
Tipado estático
La característica más importante de TypeScript es su sistema de tipado estático.
Gracias a este sistema podemos indicar explícitamente qué tipo de dato esperamos utilizar en:
Variables.
Parámetros de funciones.
Valores de retorno.
Propiedades de clases.
Objetos e interfaces.
Por ejemplo:
let nombre: string = "Felipe";
let numero: number = 2;
function sumar(a: number, b: number): number {
return a + b;
}
En este caso:
nombre debe contener un valor de tipo string.
numero debe contener un valor de tipo number.
Los parámetros a y b deben ser números.
La función debe devolver un número.
Detección temprana de errores
Supongamos que intentamos utilizar la función anterior de manera incorrecta:
let nombre: string = "Felipe";
let numero: number = 2;
let suma: number = sumar(nombre, numero);
TypeScript detectará inmediatamente un error similar al siguiente:
Argument of type 'string' is not assignable to parameter of type 'number'.
Esto sucede porque se está enviando una cadena de texto donde se esperaba un número.
La ventaja es que el error se detecta durante el desarrollo, antes de ejecutar la aplicación.
En proyectos pequeños este beneficio puede parecer menor, pero en aplicaciones empresariales grandes permite ahorrar una enorme cantidad de tiempo al identificar errores tempranamente.
Inferencia de tipos
Aunque TypeScript permite declarar tipos explícitamente, muchas veces no es necesario hacerlo.
Por ejemplo:
let nombre = "Felipe";
TypeScript es capaz de inferir automáticamente que la variable nombre es de tipo string.
Este proceso se conoce como inferencia de tipos (Type Inference).
Gracias a ello, es posible escribir código más limpio sin perder las ventajas del tipado estático.
Compatibilidad con JavaScript
Una de las mayores ventajas de TypeScript es su compatibilidad total con JavaScript.
Si una aplicación está desarrollada completamente en JavaScript, puede comenzar a utilizar TypeScript sin necesidad de realizar grandes modificaciones iniciales.
Por ejemplo:
let mensaje = "Hola Mundo";
function saludar(nombre) {
return "Hola " + nombre;
}
El código anterior es válido tanto en JavaScript como en TypeScript.
Posteriormente, el desarrollador puede ir agregando tipos gradualmente para obtener mayores beneficios.
Esta compatibilidad facilita la migración de proyectos existentes.
Características modernas del lenguaje
Además del sistema de tipos, TypeScript incorpora características modernas que ayudan a los desarrolladores a escribir código más robusto y expresivo.
Entre ellas se encuentran:
Interfaces.
Enumeraciones (Enums).
Genéricos (Generics).
Decoradores.
Tipos avanzados.
Mejor soporte para programación orientada a objetos.
Muchas de estas características permiten diseñar aplicaciones más organizadas y fáciles de mantener.
Compilación de TypeScript
Es importante entender que los navegadores no ejecutan código TypeScript directamente.
Antes de ejecutar una aplicación, el código TypeScript debe convertirse a JavaScript mediante un proceso conocido como compilación o transpilación.
El flujo de trabajo es el siguiente:
TypeScript
↓
Compilación
↓
JavaScript
↓
Navegador
Durante esta compilación es cuando TypeScript analiza el código y detecta posibles errores de tipos.
Gracias a este mecanismo, los desarrolladores pueden aprovechar las ventajas de TypeScript mientras mantienen total compatibilidad con los navegadores modernos.
¿Por qué Angular utiliza TypeScript?
Angular adopta TypeScript como lenguaje principal porque ofrece herramientas que facilitan el desarrollo de aplicaciones complejas.
Algunos beneficios son:
Detección temprana de errores.
Mejor autocompletado en el editor.
Navegación más sencilla por el código.
Refactorización más segura.
Mayor productividad.
Mejor mantenibilidad en proyectos grandes.
Estas ventajas son especialmente importantes en aplicaciones empresariales donde participan varios desarrolladores y el código debe mantenerse durante años.
TypeScript en este curso
A lo largo de este curso trabajaremos con TypeScript de forma natural como parte del desarrollo de aplicaciones Angular.
No es necesario tener experiencia previa con el lenguaje, ya que utilizaremos principalmente sus características fundamentales, incluyendo:
Variables tipadas.
Funciones.
Clases.
Interfaces.
Decoradores básicos.
Los conceptos avanzados se irán introduciendo progresivamente conforme sean necesarios para el desarrollo de la aplicación.
Resumen
TypeScript es un lenguaje desarrollado por Microsoft que extiende JavaScript mediante un sistema de tipos estáticos y otras características orientadas a mejorar la productividad y la calidad del código. Gracias a la detección temprana de errores, la compatibilidad con JavaScript y sus potentes herramientas de desarrollo, TypeScript se ha convertido en el estándar para trabajar con Angular.
Durante el resto del curso utilizaremos TypeScript como lenguaje principal para construir el frontend de nuestra aplicación, aprovechando sus ventajas para desarrollar código más seguro, mantenible y fácil de entender.
