TypeScript #13: Patrones Reales

Hemos llegado al final. Si hemos seguido todo hasta aquí, ya sabemos más TypeScript que el 80% de los desarrolladores. Para terminar, veamos algunos patrones que nos harán parecer unos magos.

Sobrecarga de Funciones (Function Overloads)

A veces una función puede hacer cosas muy distintas según qué le pasemos.

Si pasamos un string, devuelve un array de caracteres (string[]). Si pasamos un number, devuelve boolean.

¿Cómo tipamos eso? Con “Overloads”. Escribimos la firma varias veces antes de la implementación real.

// Sobrecarga 1 (Firma pública)
function convertir(input: string): string[];
// Sobrecarga 2 (Firma pública)
function convertir(input: number): boolean;

// Implementación (Privada - debe ser lo bastante amplia para cubrir todo)
function convertir(input: string | number): any {
  if (typeof input === "string") {
      return input.split("");
  } else {
      return input > 10;
  }
}

const a = convertir("Hola"); // TS sabe que 'a' es string[]
const b = convertir(50);     // TS sabe que 'b' es boolean

// Sobrecarga 1 (Firma pública)
function convertir(input: string): string[];
// Sobrecarga 2 (Firma pública)
function convertir(input: number): boolean;

// Implementación (Privada - debe ser lo bastante amplia para cubrir todo)
function convertir(input: string | number): any {
  if (typeof input === "string") {
      return input.split("");
  } else {
      return input > 10;
  }
}

const a = convertir("Hola"); // TS sabe que 'a' es string[]
const b = convertir(50);     // TS sabe que 'b' es boolean

Creando una Mini-Store (Tipo Zustand/Redux)

Juntemos Generics, Constraints y Partial para crear un gestor de estado.

class Store<T extends object> {
  private state: T;

  constructor(initialState: T) {
      this.state = initialState;
  }

  getState(): T {
      return this.state;
  }

  // Usamos Partial<T> para permitir actualizar solo trozos
  setState(newState: Partial<T>) {
      this.state = { ...this.state, ...newState };
  }
}

interface AppState {
  user: string;
  darkMode: boolean;
}

const myStore = new Store<AppState>({ 
  user: "Alice", 
  darkMode: false 
});

myStore.setState({ darkMode: true }); // ✅
myStore.setState({ user: 123 });      // ❌ Error de tipo

class Store<T extends object> {
  private state: T;

  constructor(initialState: T) {
      this.state = initialState;
  }

  getState(): T {
      return this.state;
  }

  // Usamos Partial<T> para permitir actualizar solo trozos
  setState(newState: Partial<T>) {
      this.state = { ...this.state, ...newState };
  }
}

interface AppState {
  user: string;
  darkMode: boolean;
}

const myStore = new Store<AppState>({ 
  user: "Alice", 
  darkMode: false 
});

myStore.setState({ darkMode: true }); // ✅
myStore.setState({ user: 123 });      // ❌ Error de tipo

Despedida

TypeScript tiene una curva de aprendizaje. Al principio parece que solo nos pone trabas y nos obliga a escribir más. Pero llega un día en que refactorizamos 20 archivos, TypeScript nos grita 5 errores, los corregimos, y al ejecutar… todo funciona a la primera.

Seguro que ya conoces ese subidón al solucionar un error que te ha costado días. Y el mucho mejor cuando lo solucionas porque ya sabes la respuesta de antemano sin darte cabezazos.

La teoría está muy bien, pero la maestría se forja picando código. Te animo encarecidamente a que no te quedes solo con la lectura: coge los ejemplos de cada capítulo, rompe cosas, intenta replicarlos desde cero incluso mirando, da igual, ponte a prueba. Solo usando todo esto y peleándote arreglando errores interiorizarás cómo funciona TypeScript.

¡Dale a tope! 💪 ¡Gracias por leer! 🚀