Genéricos: funciones reutilizables

El problema

Imagina que quieres una función que devuelva el primer elemento de un array. Funciona con números, strings, objetos... cualquier cosa.

Tu primera idea podría ser usar any:

Funciona, pero pierdes toda la información de tipo. num es any, no number. El autocompletado desaparece. Los errores de tipo no se detectan.

Genéricos al rescate

Los genéricos te permiten crear funciones que trabajan con cualquier tipo sin perder la información:

T es una variable de tipo. Cuando llamas a la función, TypeScript sustituye T por el tipo real.

Anatomía de un genérico

1. <T> declara la variable de tipo
2. T[] dice "un array de T" — sea lo que sea T
3. T | undefined dice "devuelve un T o undefined"

TypeScript infiere T

No necesitas especificar T manualmente. TypeScript lo deduce del argumento:

Pero puedes ser explícito si quieres:

Múltiples variables de tipo

Puedes usar más de una:

Más ejemplos

Convenciones de nombres

• T — Type (el más común)
• U — segundo tipo
• K — Key
• V — Value

Nombres cortos por convención, pero puedes usar descriptivos: TElement, TKey, TValue.

Tu desafío 🚀

1. Crea una función genérica primerElemento<T> que reciba un array de T y devuelva el primer elemento (o undefined)
2. Crea una función genérica envolverEnArray<T> que reciba un valor y lo devuelva dentro de un array
3. Prueba ambas con diferentes tipos (números, strings) e imprime los resultados

Los genéricos son como moldes: defines la forma una vez y la rellenas con cualquier material. Una función, infinitos tipos.