¿Qué son los genéricos?

Los genéricos en TypeScript permiten crear componentes (funciones, clases, interfaces) que pueden trabajar con diferentes tipos de datos, manteniendo la seguridad de tipos. Permiten escribir código más flexible y reutilizable, sin perder las ventajas de la tipificación estática. El ejemplo más simple es el uso de genéricos en funciones para devolver el mismo tipo que fue pasado como argumento.

// Función que acepta un argumento de cualquier tipo y devuelve el mismo
function identity<T>(arg: T): T {
    return arg;
}

// Uso de genérico con un tipo específico - string
let outputString = identity<string>("cadena"); // El tipo de outputString será string

// Uso de genérico con inferencia automática de tipo - number
let outputNumber = identity(123); // El tipo de outputNumber será number

Los genéricos también se pueden usar en clases:

// Clase que trabaja con elementos de cualquier tipo
class GenericBox<T> {
    value: T;
    constructor(initialValue: T) {
        this.value = initialValue;
    }
}

// Crear una instancia de GenericBox con tipo string
let stringBox = new GenericBox<string>("hola");
// Crear una instancia de GenericBox con tipo boolean
let booleanBox = new GenericBox(true); // TypeScript inferirá el tipo

Y en interfaces:

// Interfaz con genérico
interface KeyValuePair<K, V> {
    key: K;
    value: V;
}

// Uso de la interfaz con tipos específicos
let stringNumberPair: KeyValuePair<string, number> = { key: "edad", value: 30 };

Ventajas del uso de genéricos:

• Reutilización de código: Una estructura puede usarse con diferentes tipos de datos.
• Seguridad de tipos: El compilador verifica los tipos durante la compilación, previniendo errores potenciales.
• Legibilidad y mantenibilidad: El código se vuelve más comprensible, ya que se ve claramente con qué tipos trabaja el componente.

Los genéricos se usan frecuentemente en bibliotecas y frameworks, como React (para tipar las props de componentes), Redux (para tipar el store), y también al trabajar con colecciones de datos.