How to pass a Function as a Parameter in TypeScript

# Pass a function as a Parameter in TypeScript

To pass a function as a parameter, type the function's parameter list and its return value.

If the function's definition becomes too busy, extract the function type into a type alias.

index.ts

Copied!
function wrapper(
  a: number,
  b: number,
  // 👇️ function parameter
  doMath: (a: number, b: number) => number,
) {
  return doMath(a, b);
}

// 👇️ Define a function that matches
// expected parameter type
function sum(a: number, b: number) {
  return a + b;
}

console.log(wrapper(10, 20, sum)); // 👉️ 30

// ---------------------------------------------

// 👇️ Define another function that matches
// expected parameter type
function multiply(a: number, b: number) {
  return a * b;
}

console.log(wrapper(10, 20, multiply)); // 👉️ 200

pass function as parameter in typescript

The code for this article is available on GitHub

We created a function that takes 3 parameters - 2 numbers and a function.

The wrapper function calls the passed-in function with the numbers and returns the result.

index.ts

Copied!
function wrapper(
  a: number,
  b: number,
  // 👇️ function parameter
  doMath: (a: number, b: number) => number,
) {
  return doMath(a, b);
}

The wrapper function expects a function parameter that takes 2 numbers as arguments and returns a number.

The sum and multiply functions match the expected type as they both take 2 numbers as parameters and return a number.

index.ts

Copied!
function sum(a: number, b: number): number {
  return a + b;
}

// ---------------------------------------------

function multiply(a: number, b: number): number {
  return a * b;
}

# Extract the function's type into a type alias

If your function's definition becomes too busy, extract the function's type into a type alias.

index.ts

Copied!
type LogFunction = ({
  name,
  country,
}: {
  name: string;
  country: string;
}) => void;

function wrapper(
  obj: { name: string; country: string },
  logger: LogFunction
) {
  logger(obj);
}

const logger: LogFunction = (obj) => {
  console.log(obj);
};

wrapper({ name: 'Bobby', country: 'Chile' }, logger);

extract functions type into type alias

The code for this article is available on GitHub

We defined a type alias for a function that takes an object as a parameter and doesn't return a value.

Note that reused the type alias when typing the wrapper function and when defining the logger function.

Want to learn more about working with functions in TypeScript? Check out these resources: Destructuring Object parameters in TypeScript functions,How to set Default Parameters in TypeScript,Setting optional parameters in Functions or Classes in TS.

# Use the `typeof` operator to infer the function's type

If you have already defined the function you will be passing as a parameter, use the typeof operator to infer its type when typing the wrapper function's argument list.

index.ts

Copied!
const sum = (a: number, b: number): number => {
  return a + b;
};

function wrapper(a: number, b: number, doMath: typeof sum) {
  return doMath(a, b);
}

console.log(wrapper(10, 15, sum)); // 👉️ 25

use typeof operator to infer the function type

The code for this article is available on GitHub

Since we already had the sum function declared, we didn't have to type it in the parameter list of the wrapper function.

The typeof operator can be used to refer to the type of the function.

If you try to pass a function parameter that doesn't match the expected type, you'd get an error.

index.ts

Copied!
const sum = (a: number, b: number): number => {
  return a + b;
};

function wrapper(a: number, b: number, doMath: typeof sum) {
  return doMath(a, b);
}

console.log(wrapper(10, 15, sum)); // 👉️ 25

function test() {}

// ⛔️ Error: Argument of type '() => void' is not
// assignable to parameter of type
// '(a: number, b: number) => number'.
console.log(wrapper(10, 15, test)); // 👉️ 25

The function parameter we passed to the wrapper function doesn't match the expected type, so the type checker throws an error.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to pass a Function as a Parameter in TypeScript

# Pass a function as a Parameter in TypeScript

# Extract the function's type into a type alias

# Use the typeof operator to infer the function's type

# Additional Resources

Borislav Hadzhiev

# Use the `typeof` operator to infer the function's type