Tipos de función en TypeScript: sintaxis flecha y callbacks

Un tipo de función describe los parámetros y el valor de retorno de una función, y se escribe con una flecha: (a: number, b: number) => number. Ponle nombre con type y podrás usarlo en variables, parámetros y propiedades de objetos.

type Operation = (a: number, b: number) => number;

const add: Operation = (a, b) => a + b;       // a and b are number
const multiply: Operation = (x, y) => x * y;  // names do not have to match

function apply(op: Operation, a: number, b: number): number {
  return op(a, b);
}

console.log(apply(add, 2, 3));      // 5
console.log(apply(multiply, 2, 3)); // 6

La función asignada a add no necesita anotaciones: los tipos de sus parámetros vienen de Operation. Esto se llama tipado contextual, y es la razón principal para poner nombre a los tipos de función.

Sintaxis de los tipos de función

La forma es (parameters) => ReturnType. Cada parámetro necesita un nombre y un tipo. Los nombres están para facilitar la lectura y las pistas del editor; encaja cualquier función con tipos de parámetros compatibles, los llame como los llame.

type Predicate = (value: number) => boolean;
type Formatter = (value: number, digits?: number) => string; // optional parameter
type Logger = (...parts: string[]) => void;                    // rest parameter
type Factory = () => { id: number };                           // no parameters

El nombre no es opcional. (string) => void declara un parámetro llamado string sin tipo, y el modo strict lo rechaza con TS7051: Parameter has a name but no type. Did you mean 'arg0: string'?. Escribe (value: string) => void.

Tipar funciones flecha

Una función flecha se puede tipar de dos formas. Anota la propia función, o anota la variable con un tipo de función y deja que se infieran los parámetros.

// 1. Annotations on the function
const toCelsius = (f: number): number => ((f - 32) * 5) / 9;

// 2. A function type on the variable
const toFahrenheit: (c: number) => number = (c) => (c * 9) / 5 + 32;

// 3. The same, with a named type
type Convert = (value: number) => number;
const round1: Convert = (v) => Math.round(v * 10) / 10;

console.log(round1(toCelsius(100)));  // 37.8
console.log(toFahrenheit(37));        // 98.6

La forma 1 es la habitual para una función independiente. La forma 3 compensa cuando varias funciones comparten una firma (manejadores, comparadores, conversores), porque la firma se escribe una sola vez y cualquier cambio en ella se comprueba en todas partes.

Tipos de callback

Un parámetro cuyo tipo es un tipo de función es un callback. La función de quien llama se comprueba contra él, y sus parámetros se infieren de él.

function repeat(times: number, action: (index: number) => void): void {
  for (let i = 0; i < times; i++) action(i);
}

repeat(3, (i) => console.log("run", i));

function mapValues(values: number[], fn: (value: number, index: number) => string): string[] {
  const out: string[] = [];
  values.forEach((v, i) => out.push(fn(v, i)));
  return out;
}

// A callback may ignore trailing parameters: this one takes only value.
console.log(mapValues([1.5, 2.25], (v) => v.toFixed(1))); // [ '1.5', '2.3' ]

Dos reglas hacen que los callbacks sean cómodos de usar:

• Recibir menos parámetros está bien. Una función que recibe un parámetro se puede pasar donde se ofrecen dos. JavaScript ignora los argumentos de más, así que TypeScript lo permite. Recibir más parámetros de los que ofrece el tipo es un error (Target signature provides too few arguments.).
• Un retorno void acepta cualquier cosa. Un callback tipado (...) => void puede devolver un valor; quien llama promete no usarlo. Por eso list.forEach((x) => other.push(x)) compila aunque push devuelva un número.

Los tipos de los parámetros tienen que ser compatibles de todos modos. Pasar (x: string) => ... donde se espera (a: number, b: number) => number falla con Types of parameters 'x' and 'a' are incompatible.

Firmas de llamada

(n: number) => string es una forma abreviada de un tipo objeto con una firma de llamada: { (n: number): string }. Necesitas la forma larga cuando la función además lleva propiedades.

type Counter = {
  (): number;        // call signature: calling it returns a number
  count: number;     // and it has a property
  reset: () => void; // and a method
};

function makeCounter(): Counter {
  const fn = () => ++fn.count;
  fn.count = 0;
  fn.reset = () => { fn.count = 0; };
  return fn;
}

const next = makeCounter();
next();
next();
console.log(next(), next.count); // 3 3
next.reset();
console.log(next.count);         // 0

TypeScript te permite añadir propiedades a una función declarada con const en el mismo ámbito, y las registra en el tipo de la función. Una interfaz también puede contener una firma de llamada: interface Counter { (): number; count: number }.

Una firma de construcción describe algo que se llama con new. Añade new delante: new (name: string) => User, o { new (name: string): User } en forma de objeto. Así se tipa un parámetro que recibe una clase.

Sintaxis de método frente a sintaxis de propiedad

En un tipo objeto, un miembro función se puede escribir como método, handle(value: string): void, o como una propiedad que contiene una función, handle: (value: string) => void. Parecen intercambiables, pero con strict se comprueban de forma distinta:

// This does not compile: the property form checks parameters strictly.
interface WithMethod { handle(value: string | number): void }
interface WithProperty { handle: (value: string | number) => void }

const onlyStrings = (value: string) => console.log(value.toUpperCase());

const a: WithMethod = { handle: onlyStrings };   // accepted
const b: WithProperty = { handle: onlyStrings }; // rejected
a.handle(42);

El compilador informa:

index.ts(8,27): error TS2322: Type '(value: string) => void' is not assignable to type '(value: string | number) => void'.
  Types of parameters 'value' and 'value' are incompatible.
    Type 'string | number' is not assignable to type 'string'.
      Type 'number' is not assignable to type 'string'.

El error tiene razón: onlyStrings no puede manejar un número. La forma de método deja pasar el mismo fallo (los parámetros de los métodos se comprueban de forma «bivariante» por razones históricas), y a.handle(42) fallaría en tiempo de ejecución con TypeError: value.toUpperCase is not a function. Borra la línea de b para ver ese fallo. Cuando escribas tus propios tipos objeto, la forma de propiedad detecta más errores.

Evita el tipo Function

Function es el tipo integrado que cumple cualquier valor función. Casi nunca es lo que quieres: TypeScript no conoce los parámetros ni el tipo de retorno, así que se acepta cualquier llamada y devuelve any.

const loose: Function = Math.max;
const result = loose("a", {});   // compiles: any arguments, result is any
console.log(result);             // NaN

const strict: (...values: number[]) => number = Math.max;
console.log(strict(3, 9, 4));    // 9
// @ts-expect-error: Argument of type 'string' is not assignable to parameter of type 'number'.
strict("a");

Sustituye Function por la firma real. Cuando de verdad aceptas cualquier función (un debounce genérico, un envoltorio para logs), (...args: never[]) => unknown acepta todas las funciones y mantiene el resultado como unknown en lugar de any. Para funciones cuyos tipos dependen de su entrada, consulta genéricos: un tipo de función genérico se ve así: <T>(value: T) => T.