¿Qué es TypeScript? Una Guía con Ejemplos Prácticos

TypeScript es un lenguaje de programación desarrollado por Microsoft que se construye sobre JavaScript, añadiendo tipado estático opcional y otras características avanzadas. Si eres desarrollador JavaScript, aprender TypeScript puede mejorar significativamente la calidad de tu código, permitiéndote detectar errores antes de tiempo y hacer tu código más robusto. A continuación, te explicaré qué es TypeScript y te mostraré cómo puedes empezar a usarlo con ejemplos prácticos.

1. ¿Qué es TypeScript?

TypeScript es un superconjunto de JavaScript, lo que significa que todo el código JavaScript es también código TypeScript válido. La principal diferencia es que TypeScript añade tipos estáticos, lo que te permite definir el tipo de datos que las variables, funciones, y otros elementos pueden tener. Esto te ayuda a evitar errores comunes en tiempo de ejecución, ya que muchos de ellos se pueden detectar en tiempo de compilación.

2. Tipos Básicos en TypeScript

En TypeScript, puedes especificar los tipos de datos de las variables, lo que hace tu código más predecible y fácil de depurar. Aquí tienes algunos ejemplos:

Tipos Primitivos

let nombre: string = "Julio";
let edad: number = 20;
let esDesarrollador: boolean = true;

Arrays

let lenguajes: string[] = ["JavaScript", "TypeScript", "Python"];

Tuplas

let coordenadas: [number, number] = [40.7128, -74.0060];

Enumeraciones (Enums)

enum Direccion {
  Arriba,
  Abajo,
  Izquierda,
  Derecha
}

let mover: Direccion = Direccion.Arriba;

3. Funciones en TypeScript

Las funciones en TypeScript permiten especificar los tipos de los parámetros y el valor de retorno, lo que hace que sean más claras y fáciles de usar.

Función con Tipado

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

console.log(sumar(2, 3)); // 5

Funciones con Parámetros Opcionales

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

console.log(saludar("Julio")); // Hola, Julio
console.log(saludar("Julio", "Buenos días")); // Buenos días, Julio

Funciones con Parámetros Predeterminados

function elevar(base: number, exponente: number = 2): number {
  return Math.pow(base, exponente);
}

console.log(elevar(3)); // 9
console.log(elevar(3, 3)); // 27

4. Interfaces en TypeScript

Las interfaces son una característica poderosa de TypeScript que te permite definir la estructura de objetos complejos, lo que facilita trabajar con ellos en tu código.

Definir una Interfaz

interface Usuario {
  nombre: string;
  edad: number;
  email?: string; // Opcional
}

let usuario: Usuario = {
  nombre: "Julio",
  edad: 20
};

Usar una Interfaz en una Función

function mostrarUsuario(usuario: Usuario): void {
  console.log(`Nombre: ${usuario.nombre}, Edad: ${usuario.edad}`);
}

mostrarUsuario(usuario); // Nombre: Julio, Edad: 20

5. Clases en TypeScript

TypeScript soporta clases con un sistema de tipado estático, lo que permite crear y manejar objetos de manera más estructurada.

Crear una Clase

class Persona {
  nombre: string;
  edad: number;

  constructor(nombre: string, edad: number) {
    this.nombre = nombre;
    this.edad = edad;
  }

  saludar(): string {
    return `Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`;
  }
}

let persona = new Persona("Julio", 20);
console.log(persona.saludar()); // Hola, mi nombre es Julio y tengo 20 años.

Herencia en Clases

class Desarrollador extends Persona {
  lenguaje: string;

  constructor(nombre: string, edad: number, lenguaje: string) {
    super(nombre, edad);
    this.lenguaje = lenguaje;
  }

  saludar(): string {
    return `${super.saludar()} Soy desarrollador de ${this.lenguaje}.`;
  }
}

let desarrollador = new Desarrollador("Julio", 20, "TypeScript");
console.log(desarrollador.saludar()); // Hola, mi nombre es Julio y tengo 20 años. Soy desarrollador de TypeScript.

6. Genéricos en TypeScript

Los genéricos permiten crear componentes que pueden trabajar con varios tipos de datos sin sacrificar el tipo de seguridad.

Ejemplo de Genéricos

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

console.log(identidad<number>(42)); // 42
console.log(identidad<string>("Hola TypeScript")); // Hola TypeScript

7. Conclusión

TypeScript es una poderosa herramienta que extiende JavaScript con características avanzadas de tipado y estructuras más robustas. No solo ayuda a prevenir errores, sino que también facilita el mantenimiento y escalabilidad del código. Si aún no lo has hecho, te animo a que lo pruebes en tu próximo proyecto. ¡Verás cómo tu experiencia de desarrollo mejora! 🚀