Introducción a TypeScript: Lo que necesitas saber antes de trabajar con Angular o React

Después de publicar la guía completa sobre cómo empezar con Angular, me di cuenta de que muchos conceptos clave requieren una base sólida en TypeScript. Por eso nace este artículo: para ayudarte a empezar con TypeScript, comprender su propósito y prepararte antes de sumergirte en frameworks como Angular o React.

Ya sea que vengas de JavaScript o estés empezando desde cero, esta guía cubre los fundamentos más importantes, acompañados de ejemplos prácticos para que puedas integrar TypeScript con confianza en tus próximos proyectos.

¿Qué es TypeScript y por qué deberías aprenderlo antes de usar frameworks?

TypeScript es un superconjunto de JavaScript desarrollado por Microsoft, que añade tipado estático, clases, interfaces y muchas características de los lenguajes fuertemente tipados. Su principal objetivo es ayudarte a escribir código más predecible y menos propenso a errores.

Ventajas clave de TypeScript:

• Mejora la escalabilidad del código.
• Detecta errores antes de ejecutar.
• Ayuda con el autocompletado en los editores modernos.
• Se integra perfectamente con frameworks modernos como Angular.

Dominar TypeScript es fundamental si tu objetivo es trabajar en proyectos profesionales o colaborativos. A diferencia de JavaScript, TypeScript te obliga a ser explícito, lo que ayuda a otros desarrolladores (y a ti mismo) a entender mejor lo que estás escribiendo.

¿Cómo instalar y configurar TypeScript correctamente?

Antes de escribir código, necesitas tener instalado:

• Node.js y npm
• TypeScript (desde la terminal):

npm install -g typescript

• Un editor como Visual Studio Code que tenga soporte para TypeScript.

Para compilar archivos .ts:

tsc archivo.ts

Esto genera un archivo JavaScript equivalente (archivo.js) que el navegador puede ejecutar.

También puedes iniciar un proyecto con configuración propia ejecutando:

tsc --init

Esto creará un archivo tsconfig.json para definir opciones de compilación como rutas, versiones y modo estricto.

Además, puedes integrar herramientas como ESLint y Prettier para mantener un estilo de código limpio y consistente.

Tipado estático: tu mejor aliado para escribir código más seguro

Una de las primeras cosas que notarás al comenzar con este lenguaje es el sistema de tipos.

Ejemplo básico:

let edad: number = 30;
let nombre: string = "Enrique";
let activo: boolean = true;

Esto ayuda a evitar errores comunes como:

edad = "treinta"; // Error, espera un número

También puedes definir tipos en funciones:

function saludar(nombre: string): string {
  return `Hola, ${nombre}`;
}

Este control te permite escribir código más confiable, especialmente en aplicaciones a gran escala.

Interfaces, tipos personalizados y su uso práctico

Las interfaces son estructuras que definen cómo debe lucir un objeto. Muy útiles en Angular y React para definir props o modelos de datos.

interface Usuario {
  nombre: string;
  edad: number;
  activo: boolean;
}

const user: Usuario = {
  nombre: "Ana",
  edad: 25,
  activo: true
};

También puedes usar type como alternativa:

type Rol = "admin" | "usuario" | "invitado";

Esto permite restringir valores posibles y evitar errores en la lógica de negocio.

Funciones en TypeScript: parámetros y flexibilidad

Además del tipado básico, TypeScript permite definir funciones más completas:

function sumar(a: number, b: number): number {
  return a + b;
}

Puedes añadir parámetros opcionales y valores por defecto:

function registrar(nombre: string, activo: boolean = true): void {
  console.log(`${nombre} está ${activo ? "activo" : "inactivo"}`);
}

También puedes crear funciones que acepten callbacks:

function operar(callback: (a: number, b: number) => number): void {
  console.log(callback(2, 3));
}

Clases en TypeScript: cómo aplicar POO con facilidad

Si vienes de lenguajes como Java o C#, usar clases te será muy familiar:

class Persona {
  constructor(public nombre: string, public edad: number) {}

  presentarse(): string {
    return `Hola, me llamo ${this.nombre} y tengo ${this.edad} años.`;
  }
}

Puedes aplicar herencia:

class Empleado extends Persona {
  constructor(nombre: string, edad: number, public puesto: string) {
    super(nombre, edad);
  }
}

Esto facilita la reutilización de lógica y mantiene la estructura del proyecto limpia.

Enumeraciones, genéricos y herramientas avanzadas

Enumeraciones:

enum Rol {
  Admin,
  Usuario,
  Invitado
}

let rolActual: Rol = Rol.Usuario;

Genéricos:

function identidad<T>(valor: T): T {
  return valor;
}

console.log(identidad<string>("Hola"));
console.log(identidad<number>(10));

Estas características te permiten escribir código reutilizable, sin sacrificar el control del tipo de datos.

Aplicaciones prácticas con Angular y React

En Angular, usar TypeScript no es una opción: es obligatorio. Permite definir componentes, servicios, formularios y estructuras de datos con seguridad.

En React, aunque es opcional, se ha vuelto una práctica común. Define props, estados y tipos de eventos para evitar errores.

Ejemplo en React:

interface BotonProps {
  texto: string;
  onClick: () => void;
}

function Boton({ texto, onClick }: BotonProps) {
  return <button onClick={onClick}>{texto}</button>;
}

Esta estructura hace tu código más robusto y fácil de mantener.

Consejos y buenas prácticas para trabajar mejor con TypeScript

• Usa strict: true en tu configuración para mayor seguridad.
• Divide el código en módulos reutilizables.
• Declara interfaces para props, configuraciones y datos.
• Revisa tu código con linters y herramientas como ESLint.
• Aprovecha los genéricos y enums para mantener tu código limpio.
• Añade comentarios y documentación básica para facilitar el mantenimiento.

Recursos recomendados para seguir aprendiendo TypeScript

Si quieres seguir avanzando con este lenguaje, te recomiendo:

• La documentación oficial de TypeScript
• Cursos gratuitos en YouTube (Academind, FreeCodeCamp)
• Ejercicios en sitios como Codewars o Frontend Mentor
• Grupos de Telegram, Discord y foros como Stack Overflow

Conclusión: una base sólida en TypeScript marca la diferencia

Empezar con TypeScript te prepara para crear aplicaciones más estructuradas, claras y mantenibles. Si tu objetivo es trabajar con frameworks como Angular o React, dominar este lenguaje no es solo útil: es casi imprescindible.

Aunque al principio pueda parecer más exigente que JavaScript, con la práctica verás cómo mejora tu forma de programar. Además, si ya has leído mi guía sobre Angular, este es el siguiente paso natural para potenciar tu desarrollo frontend.

¿Te ha resultado útil esta introducción? Me encantaría conocer tu opinión o saber qué temas te gustaría que abordara en próximos artículos.