Funciones flecha TypeScript con genéricos: guía completa con ejemplos

Menos código, más utilidad: entendiendo las funciones flecha y los genéricos en TypeScript

¿Alguna vez ha escrito una pequeña utilidad en TypeScript que debía funcionar tanto con números, como con cadenas y con arreglos? Y de inmediato se encontró con el problema: ¿cómo hacer que el tipo de datos sea flexible, pero que TypeScript no se queje? La respuesta son los genéricos (generics, o tipos genéricos). Y si le gusta la sintaxis concisa, seguramente usa funciones flecha.

Pero hay un inconveniente: en Stack Overflow, la pregunta «What is the syntax for Typescript arrow functions with generics?» ha acumulado miles de visitas. Resulta que incluso desarrolladores experimentados a veces se confunden con esta combinación, aparentemente simple. En este artículo, entenderemos cómo escribir correctamente funciones flecha TypeScript con genéricos, veremos errores comunes y mostraremos cómo hacer su código más limpio y seguro.

¿Listo? ¡Vamos allá!

¿Qué son los genéricos en funciones flecha?

Para empezar, una breve introducción. Los genéricos permiten crear componentes (funciones, clases, interfaces) que trabajan con diferentes tipos, en lugar de uno específico. En lugar de escribir funciones separadas para números y cadenas, escribe una sola con un genérico.

Las funciones flecha (arrow functions) son una sintaxis compacta para funciones en JavaScript y TypeScript. Cuando las combina con genéricos, obtiene una herramienta poderosa para crear utilidades reutilizables.

// Función normal con genéricofunction identity<T>(arg: T): T {    return arg;}

// Función flecha con genérico — ¿cómo se ve?const arrowIdentity = <T>(arg: T): T => arg;

¿Sencillo? Sí, pero hay matices que veremos a continuación.

Sintaxis básica: cómo declarar correctamente una función flecha TypeScript con genéricos

La forma más simple y común es indicar el parámetro de tipo (genérico) antes de los paréntesis con los argumentos:

const firstElement = <T>(arr: T[]): T | undefined => {    return arr[0];};

// Usoconst num = firstElement([1, 2, 3]); // type: number | undefinedconst str = firstElement(['a', 'b']); // type: string | undefined

Aquí <T> es la declaración del genérico. TypeScript inferirá automáticamente el tipo T basándose en el argumento pasado. Si desea especificar el tipo explícitamente, también funciona:

const num = firstElement<number>([1, 2, 3]); // Especificamos el tipo explícitamente

Importante: En JSX (React), esta sintaxis puede entrar en conflicto con el marcado. Para estos casos, existen soluciones alternativas (más abajo).

Varios genéricos en una misma función flecha

Puede usar varios parámetros de tipo:

const pair = <T, U>(first: T, second: U): [T, U] => {    return [first, second];};

const result = pair(42, 'hello'); // type: [number, string]

Esto es especialmente útil al trabajar con utilidades como map, reduce o al crear envoltorios.

Problemas con JSX (React) y su solución

Si escribe en React con TypeScript, notará que la sintaxis <T>(arg) puede ser interpretada por el compilador como una etiqueta JSX. Este es un problema clásico, por el cual la pregunta en Stack Overflow ganó tanta popularidad.

Hay dos soluciones principales:

1. Usar extends (incluso si no es necesario)

Agregue extends unknown o extends Record<string, never>:

const myFunction = <T extends unknown>(arg: T): T => {    return arg;};

Esto le indica explícitamente a TypeScript que <T> es un genérico, no JSX.

2. Usar sintaxis con coma

En algunos casos, agregar una coma después del genérico ayuda:

const myFunction = <T,>(arg: T):