Tipificación de callbacks en TypeScript: cómo definir el tipo para una función manejadora

Cómo dejar de usar any para callbacks y empezar a vivir: guía completa para tipificar funciones manejadoras en TypeScript

¿Alguna vez has escrito algo como callback: any en los parámetros de un método? Si es así, bienvenido al club. Si no, o eres un genio o apenas estás comenzando tu camino en TypeScript. Es broma. Pero cada broma tiene algo de verdad: según Stack Overflow, la pregunta "How to define type for a function callback (as any function type, not universal any)" acumula miles de visitas. Y no es casualidad.

El problema es que any es como un agujero negro: absorbe toda la seguridad de tipos de tu código. Pierdes el autocompletado, la verificación de argumentos y la capacidad de detectar errores en tiempo de compilación. Pero lo más frustrante es que any como tipo de callback mata la idea misma de TypeScript. Analicemos cómo tipificar correctamente una función callback en un parámetro de método, para que el código sea seguro y elegante.

¿Por qué Function no es mejor que any?

El primer impulso de un principiante es usar el tipo incorporado Function. Después de todo, es el tipo "cualquier función", así que debería servir. Pero no. Function es un tipo tan "basura" como any. No proporciona ninguna información sobre la firma: cuántos parámetros acepta la función, qué devuelve, qué tipos tienen los argumentos. Simplemente le dices al compilador: "Confía en mí, sé lo que hago". Spoiler: generalmente no lo sabes.

// Mal: sin verificación de tipos\nfunction processData(callback: Function) {\n    callback(42, "hello"); // ¿Error? Quién sabe\n}

Con este enfoque, pierdes todas las ventajas de la tipificación estática. Vamos a corregirlo.

Paso 1. Tipificación básica de callback: simple y clara

La forma más simple y correcta es declarar el tipo de función directamente en el parámetro. Para esto se usa la sintaxis de flecha (parámetros) => tipo_retornado. Esto es el function type en TypeScript.

// Bien: definimos explícitamente la firma\nfunction fetchData(url: string, onSuccess: (data: string) => void): void {\n    // ... alguna lógica\n    const result = "Datos del servidor";\n    onSuccess(result);\n}\n\n// Uso — con autocompletado y verificación\nfetchData("/api/users", (data) => {\n    console.log(data.toUpperCase()); // data — string, todo bien\n});

Observa el void en el tipo de retorno. Esto significa que no esperamos un valor específico del callback. Si el callback devuelve algo, se ignorará. Si esperas un resultado, usa un tipo concreto.

Paso 2. Callback con múltiples parámetros

A menudo los callbacks aceptan más de un argumento. Por ejemplo, un manejador de errores o un evento con datos. Aquí es igual de simple: enumeramos todos los parámetros separados por coma.

// Tipo para callback con error y resultado\nfunction loadUser(\n    userId: number,\n    callback: (error: Error | null, user: { name: string; age: number } | null) => void\n): void {\n    // ... lógica de carga\n    const user = { name: "Ana", age: 30 };\n    callback(null, user);\n}\n\n// Uso\nloadUser(42, (err, user) => {\n    if (err) {\n        console.error("Error:", err.message);\n        return;\n    }\n    if (user) {\n        console.log(`¡Hola, ${user.name}!`);\n    }\n});

¿Ves cómo TypeScript sugiere automáticamente los tipos de err y user? Esto es la tipificación de función callback en acción. Sin any, sin magia, solo verificación estricta.

Paso 3. Creando tipos reutilizables para callbacks

Si el mismo tipo de callback se usa en varios lugares, no es necesario duplicarlo cada vez. Sácalo a un type alias o interface separado. Esto mejora la legibilidad y simplifica el mantenimiento.

// Declar