TypeScript Function Type: Arrow Syntax and Callback Types

A function type describes the parameters and the return value of a function, written with an arrow: (a: number, b: number) => number. Give it a name with type and you can use it for variables, parameters and object properties.

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

The function assigned to add needs no annotations: its parameter types come from Operation. This is called contextual typing, and it is the main reason to name function types.

Function Type Syntax

The shape is (parameters) => ReturnType. Each parameter needs a name and a type. The names are there for readability and editor hints; any function with compatible parameter types matches, whatever it calls them.

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

The name is not optional. (string) => void declares a parameter called string with no type, and strict mode rejects it with TS7051: Parameter has a name but no type. Did you mean 'arg0: string'?. Write (value: string) => void.

Typing Arrow Functions

An arrow function can be typed two ways. Annotate the function itself, or annotate the variable with a function type and let the parameters be inferred.

// 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

Form 1 is the usual choice for a standalone function. Form 3 pays off when several functions share one signature (handlers, comparators, converters), because the signature is written once and a change to it is checked everywhere.

Callback Types

A parameter whose type is a function type is a callback. The caller's function is checked against it, and its parameters are inferred from it.

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' ]

Two rules make callbacks pleasant to use:

• Fewer parameters is fine. A function that takes one parameter can be passed where two are offered. JavaScript ignores extra arguments, so TypeScript allows it. More parameters than the type offers is an error (Target signature provides too few arguments.).
• A void return accepts anything. A callback typed (...) => void may return a value; the caller promises not to use it. That is why list.forEach((x) => other.push(x)) compiles even though push returns a number.

The parameter types must still be compatible. Passing (x: string) => ... where (a: number, b: number) => number is expected fails with Types of parameters 'x' and 'a' are incompatible.

Call Signatures

(n: number) => string is shorthand for an object type with a call signature: { (n: number): string }. You need the long form when the function also carries properties.

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 lets you add properties to a function declared with const in the same scope, and it tracks them in the function's type. An interface can hold a call signature too: interface Counter { (): number; count: number }.

A construct signature describes something called with new. It adds new in front: new (name: string) => User, or { new (name: string): User } in object form. It is how you type a parameter that receives a class.

Method Syntax vs Property Syntax

In an object type, a function member can be written as a method, handle(value: string): void, or as a property holding a function, handle: (value: string) => void. They look interchangeable but are checked differently under strict:

// 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);

The compiler reports:

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'.

The error is right: onlyStrings cannot handle a number. The method form lets the same mistake through (method parameters are checked "bivariantly" for historical reasons), and a.handle(42) would crash at run time with TypeError: value.toUpperCase is not a function. Delete the b line to see that crash. When you write your own object types, the property form catches more.

Avoid the Function Type

Function is the built-in type every function value satisfies. It is almost never what you want: TypeScript does not know the parameters or the return type, so every call is accepted and returns 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");

Replace Function with the real signature. When you truly accept any function (a generic debounce, a logging wrapper), (...args: never[]) => unknown accepts every function and still keeps the result unknown instead of any. For functions whose types depend on their input, see generics: a generic function type looks like <T>(value: T) => T.