Generics

Crea componentes reutilizables con tipos flexibles.

Qué son los Generics?

Los generics permiten crear funciones, clases e interfaces que funcionan con any tipo sin perder la seguridad de tipos.

typescript

// Sin generics: perdes tipo
function primerElemento(arr: any[]): any {
  return arr[0];
}

// Con generics: mantenes tipo
function primerElemento<T>(arr: T[]): T {
  return arr[0];
}

const num = primerElemento([1, 2, 3]);     // number
const str = primerElemento(["a", "b"]);   // string

Multiples tipos

typescript

function intercambiar<A, B>(a: A, b: B): [B, A] {
  return [b, a];
}

const [x, y] = intercambiar(1, "hello"); // [string, number]

Constraints

typescript

// Asegurar que T tiene ciertas propiedades
function longest<T extends { length: number }>(a: T, b: T): T {
  return a.length >= b.length ? a : b;
}

longest("hola", "adios");     // "hola"
longest([1, 2], [1, 2, 3]);   // [1, 2, 3]

Generics en interfaces

typescript

interface Respuesta<T> {
  datos: T;
  exito: boolean;
  mensaje: string;
}

const res1: Respuesta<string> = { datos: "OK", exito: true, mensaje: "" };
const res2: Respuesta<number[]> = { datos: [1, 2], exito: true, mensaje: "" };

Generics en clases

typescript

class Caja<T> {
  contenido: T;

  constructor(contenido: T) {
    this.contenido = contenido;
  }

  obtener(): T {
    return this.contenido;
  }
}

const cajaNum = new Caja<number>(42);
const cajaStr = new Caja<string>("hola");

Generics con defaults

typescript

function crearPila<T = string>(): T[] {
  return [];
}

const pila = crearPila();      // string[]
const pilaNum = crearPila<number>(); // number[]

Ejercicio pratico

Crea una función genérica 'filtrar' que retorne solo los elementos que cumplan una condicion.

exercise.ts

Resultado

Haz clic en "Ejecutar" para ver el resultado...

Utility Types