How to pass a TypeScript function as a parameter

This article explores how to pass functions and structured objects as parameters in TypeScript. It highlights use cases, syntax differences, and practical scenarios where each may be preferred, especially when working with function types, inheritance, excess property checks, and optional fields.

In JavaScript, functions are considered first-class citizens, which means they can be handled like any other type of variable, including numbers, strings, and arrays. This allows functions to be passed into other functions, returned from functions, and assigned to variables for later use.

This feature is heavily used in asynchronous code, where functions are often passed into asynchronous functions, often referred to as callbacks. But this can be tricky to use with TypeScript.

TypeScript offers us the fantastic benefits of adding static types and transpilation checks, and it can help us better document what types of variables we expect in our functions. But what happens if we need to pass functions?

It’s evident that typing these functions is necessary. However, the question arises: how do we type them, and how do we pass a function in TypeScript? In this tutorial, we will explore TypeScript functions, how to pass them as parameters in our apps, and how to pass objects defined by interfaces and type annotations into them.

---

Editor’s note: This article was updated by Elijah Agbonze in May 2025 to compare passing inline type definitions as parameters with declaring interfaces and passing them, include an explanation of structural typing, and address edge cases related to passing TypeScript functions as parameters.

---

What is a TypeScript function type?

Most TypeScript developers are familiar with typing simple variables, but constructing a type for a function is a little more complicated.

A function type (note: this link redirects to old TypeScript docs, but it has a much clearer example than the newer ones) is made up of the types of arguments the function accepts and the return type of the function.

We can illustrate a very simple example to demonstrate this:

const stringify = (el : any) : string => { return el + "" } 
const numberify = (el : any) : number => { return Number(el) }

let test = stringify;
test = numberify;

If implemented in JavaScript, the above example would work fine and have no issues.
But when we utilize TypeScript, errors are thrown when we try to transpile our code:

- Type '(el: any) => number' is not assignable to type '(el: any) => string'.
-   Type 'number' is not assignable to type 'string'.

The error message thrown here is descriptive: the stringify and numberify function are not interchangeable. They cannot be assigned interchangeably to the test variable, as they have conflicting types. The arguments they receive are the same (one argument of type any), but we receive errors because their return types are different.

We could change the return types here to prove our theory is correct:

const stringify = (el : any) : number => { return 1 } 
const numberify = (el : any) : number => { return Number(el) }

let test = stringify;
test = numberify;

The above code now works as expected. The only difference is that we changed the stringify function to match the return type of the numberify function. Indeed, the return type was breaking this example.

Declaring function types in TypeScript

In TypeScript, we can declare a function type with the type keyword. The type keyword in TypeScript allows us to specify the shape of data:

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

Here, we define a type alias named AddOperator using the type keyword. It represents a function type that takes two parameters (a and b) of type number and returns a value of type number.

Another way to declare a function type is to use interface syntax. The below Add interface represents the same function type as the above AddOperator function type:

// Using interface for function type
interface Add {
  (a: number, b: number): number;
}

Explicitly defining function structures provides a clear understanding of expected inputs and outputs. This enhances code readability, serves as documentation, and simplifies code maintenance.

Another main advantage of declaring function types is the ability to catch errors at compile time. TypeScript’s static typing ensures that functions adhere to the specified types, preventing runtime errors caused by mismatched parameter types or invalid return types.

In the example below, the TypeScript compiler will throw an error, indicating the mismatch between the expected and actual return types:

// Function violating the parameter type
const addFn: AddOperator = (a, b) => `${a}${b}`;
// Error: Type 'string' is not assignable to type 'number'

Declaring function types allows Integrated Development Environments (IDEs) to offer precise autocompletion.

IntelliSense, a powerful feature offered by modern IDEs, provides us with context-aware suggestions. Function types provide explicit information about parameter types, making it easier to understand the expected inputs. As we start typing function names or parameters, IntelliSense utilizes the declared types to suggest valid options, minimizing errors and saving time.

Utilizing JavaScript/TypeScript’s pass-by-reference for functions

In JavaScript and TypeScript, understanding the concepts of pass-by-value and pass-by-reference is crucial for working with functions and manipulating data. Primitive types (such as Boolean, null, undefined, String, and Number) are treated as pass-by-value, while objects (including arrays and functions) are handled as pass-by-reference.

When an argument is passed to the function, pass-by-value means a copy of the variable is created, and any modifications made within the function do not affect the original variable. In the example below, we change the value of the variable a inside the function, but the value of the variable a outside isn’t changed as a is passed into the function with pass-by-value:

const numberIncrement = (a: number) => {
    a = a + 1;
    return a;
}
let a = 1;
let b = numberIncrement(a);
console.log(`pass by value -> a = ${a} b = ${b}`);
// pass by value -> a = 1 b = 2

When an object or array argument is passed to a function, it is treated as pass-by-reference. The argument is copied as a reference, not the object itself. Thus, changes to the argument’s properties inside the function are reflected in the original object. In the example below, we can observe that the change of the array orignalArray inside the function affects the orignalArray outside the function:

const arrayIncrement = (arr: number[]): void => {
  arr.push(99);
};
const originalArray: number[] = [1, 2, 3];
arrayIncrement(originalArray);
console.log(`pass by ref => ${originalArray}`);  // pass by ref => 1,2,3,99

Contrary to some misconceptions, even though the reference to the object is copied for pass-by-reference, the reference itself is still passed by value. If the object reference is reassigned inside the function, it won’t affect the original object outside the function.

The below example illustrates reassigning an array reference of originalArray inside the function, and its original object isn’t affected:

const arrayIncrement = (arr: number[]): void => {
  arr = [...arr, 99];
  console.log(`arr inside the function => ${arr}`); 
};
//arr inside the function => 1,2,3,99
const originalArray: number[] = [1, 2, 3];
arrayIncrement(originalArray);
console.log(`arr outside => ${originalArray}`);  // arr outside => 1,2,3

Advanced patterns: generics and function overloads

Generics in TypeScript provide a way to write functions that can work with any data type. The following example is sourced from the official TypeScript documentation:

function identity<T>(arg: T): T {
  return arg;
}
console.log(identity("Hello, TypeScript!"));
console.log(identity(99));

Here, the identity function can accept and return values of any type. This flexibility allows us to write functions that adapt to various data types.

Reusable and adaptable functions using generics

We can create highly reusable and adaptable functions that work with various data types using generics.

Let’s say we want to create a utility function for searching elements in an array based on a specific criterion. Using generics allows the function to work with arrays of various types and accommodate different search criteria:

function findElements<T>(arr: T[], filterFn: (item: T) => boolean): T[] {
  return arr.filter(filterFn);
}

Here, we create a generic function named findElements that takes an array arr and a filterFn function as parameters. The filterFn parameter is a callback function that determines whether an element satisfies a particular criterion, returning a Boolean.

Below are a couple of examples in which we use the function from above to deal with number types, object types, and different search criteria. We use the function to filter odd numbers from an array and inexpensive products from an array of products, demonstrating its flexibility with different data types:

const arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const oddNumbers: number[] = findElements(arr, (num) => num % 2 === 1);
console.log("Odd Numbers:", oddNumbers);

interface Product {
  name: string;
  price: number;
}
const products: Product[] = [
  { name: "Phone", price: 400 },
  { name: "Laptop", price: 1000 },
  { name: "Tablet", price: 300 }
];
const cheapProducts =  findElements(products, (p) => p.price < 500);
console.log('cheap products:', cheapProducts);

The use of generics makes the function highly reusable and adaptable, making it applicable to arrays of primitive types or custom objects without sacrificing type safety.

Function overloads

Function overloads allow us to provide multiple type signatures for a single function. This is particularly useful when a function can accept different combinations of argument types.

To use function overload, we must define multiple overload signatures and an implementation. The overload signature outlines the parameter and return types of a function without including an actual implementation body:

// Overload signature
function greeting(person: string): string;
function greeting(persons: string[]): string;
// Implementation of the function
function greeting(input: string | string[]): string {
  if (Array.isArray(input)) {
    return input.map(greet => `Hello, ${greet}!`).join(' ');
  } else {
    return `Hello, ${input}!`;
  }
}
// Consume the function
console.log(greeting('Bob'));
console.log(greeting(['Bob', 'Peter', 'Sam']));

In the above example, we create a function that demonstrates function overloads accepting parameters, either a string or an array of strings. This function, named greeting, has two overloads to handle these scenarios. The implementation checks whether the input parameter is a string or an array of strings and performs the appropriate action for each case.

We can leverage generics to create versatile functions that work with various data types. Additionally, function overload is valuable in enhancing parameter flexibility, allowing functions to accept different types while providing clear expectations for each case.

Using argument numbers in TypeScript

Interestingly, many other languages will create these function types based on the types of arguments, return types, and the number of arguments for the function.

Let’s make one final example to expand on our last working example:

const stringify = (el : any, el2: number) : number => { return 1 } 
const numberify = (el : any) : number => { return Number(el) }

let test = stringify;
test = numberify;

Developers familiar with other languages might think the above function examples aren’t interchangeable, as the two function signatures differ.

This example throws no errors, though, and it’s legitimate in TypeScript because TypeScript implements what’s referred to as duck typing.

In duck typing, TypeScript checks if the structure of the assigned function is compatible with the expected type based on the function’s parameters and return type. In this case, both stringify and numberify share the same structure: a function that takes one or more parameters (of any type) and returns a number. Despite the difference in the number of parameters between the two functions, TypeScript allows this assignment due to duck typing.

It’s a small note, but it’s important to remember: the number of arguments isn’t utilized in type definitions for functions in TypeScript.

Typing our functions example in TypeScript

Now that we know precisely how to construct types for our functions, we need to ensure we type the functions that we pass in TypeScript.

Let’s work through a failing example together again:

const parentFunction = (el : () ) : number => { return el() } 

The above example doesn’t work, but it captures what we need.

We need to pass it to a parent function as a callback, which can be called later. So, what do we need to change here? We need to:

• Type the el function argument
• Type the arguments we pass into the el function (if it requires them)

Upon doing this, our example should now look like this:

const parentFunction = (el : () => any ) : number => { return el() } 

This specific example doesn’t require arguments, but if it did, here is what it would look like:

const parentFunction = (el : (arg: string) => any ) : number => { return el("Hello :)") } 

This example is relatively simple to explain the concepts of TypeScript functions easily. However, if we have more complicated types, we may spend a significant amount of time typing everything.

The community maintains plenty of high-quality open source typings commonly used in TypeScript, called Definitely Typed, which can help us simplify and speed up the typing we need to use.

Passing objects as arguments in TypeScript

This section will look extensively at how object literals are declared and passed as arguments into functions in TypeScript. Depending on your use case, you can decide to declare an object type before passing it or passing it inline:

interface Product {
  name: string;
  price: number;
}

const getProductInfo = (product: Product): string => {
  return `This is a ${product.name} made for durability and sustainability. Going for a whooping $${product.price}. Best offer!`;
};

console.log(getProductInfo({ name: "Phone", price: 400 }))

How excess property checks work

TypeScript performs checks on your objects to make sure it doesn’t have any extra properties beyond what was declared in the object type:

interface Product { 
  name: string; 
  price: number; 
} 

const product1: Product = { 
  name: "Phone", 
  price: 400, 
  brand: "Apple" 
}

The code above will throw an error because brand is an excess property not declared in the Product type.

In some cases, TypeScript doesn’t throw an error on an excess property. One of which is explicitly using a variable:

const productObj = { 
  name: "Phone", 
  price: 400, 
  brand: "Apple" 
} 

const product1: Product = productObj; // works fine 

Another example of no error on an excess property is by using an assertion:

const product1 = { 
  name: "Phone", 
  price: 400, 
  brand: "Apple" 
} as Product;

Optional properties

If you want a property that may not be used throughout the whole use of the declared object type, then you should declare it as optional:

interface Product { 
  name: string; 
  price: number; 
  discount?: number; 
} 

const product1: Product = { 
  name: "Phone", 
  price: 400, 
  discount: 10 
} 

const product2: Product = { 
  name: "Tablet", 
  price: 300 
} 

When working on objects with optional properties, TypeScript requires you to perform a check for the optional property before using it:

const getTotalDiscount = (purchasedProducts: Product[]): number => { 
  return purchasedProducts.reduce( 
    (total: number, p: Product) => (p.discount + total), // TypeScript will throw an error 
    0 
  ); 
}; 

const getTotalDiscount = (purchasedProducts: Product[]): number => { 
  return purchasedProducts.reduce( 
    (total: number, p: Product) => (p.discount ? p.discount + total : total), // works fine 
    0 
  ); 
}; 

When to declare vs. when to inline

Declaring a type/interface is useful for cases where it would be reused across your app or for maintainability. Oftentimes, you will need parameters that you’d have no use for again, and you can simply pass them inline without first declaring a type for them:

const calculateShippingCost = (item: { 
  amount: number; 
  destination: { international: boolean }; 
  weight: number; 
}): number => { 
  const baseRate = item.destination.international ? 25 : 5; 
  return item.weight * item.amount * baseRate; 
};

console.log(calculateShippingCost({ amount: 500, destination: { international: true }, weight: 30 }));

On the other hand, you may have a type that needs to be reused. In this case, you should declare an interface/type:

interface User { 
  name: string; 
  age: number; 
  orders: number; 
  itemsInCart: number; 
} 

const greetUser = (user: User): string => { 
  return `Hello ${user.name}, you have ${user.itemsInCart} items in your cart!`; 
};

Interfaces vs. types

Like many comparisons in programming, deciding when to use something is often the question, rather than which to use. This is the same case here.

Both interfaces and types can be used almost interchangeably. They both serve the same purpose, but there are some subtle differences between the two that can make a difference during your development.

One of these is how function types are declared. We saw an example of both use cases, and the difference boils down to a : for interface and => for types.

Another case is how they both manage extension. Interfaces do this with the use of the extends keyword (OOP lovers would feel right at home with this):

interface User { 
  name: string; 
  age: number; 
}

interface AppUser extends User { 
  orders: number; 
  itemsInCart: number; 
} 

Types, on the other hand, uses intersection (&):

type User = { 
  name: string; 
  age: number; 
}; 

type AppUser = User & { 
  orders: number; 
  itemsInCart: number; 
};

This is just an introduction. You may want to look at an in-depth article on extending object-like types in TypeScript.

Interfaces can be declared multiple times, and the TypeScript compiler will automatically merge the declarations. This is a process called Declaration merging, and it is exclusive to interfaces only:

interface User { 
  name: string; 
  age: number; 
}; 

interface User { 
  orders: number; 
  itemsInCart: number 
} 

Types are more flexible for data complexity and manipulation:

type ApiResponse<T> = 
  | { status: "success"; data: T; timestamp: number } 
  | { status: "error"; error: string; code: number }; 

const processResponse = (response: ApiResponse<User[]>): string => { 
  if (response.status === "success") { 
    // TypeScript knows this is the success branch 
    return `Got ${response.data.length} users`; 
  } else { 
    // TypeScript knows this is the error branch 
    return `Error ${response.code}: ${response.error}`; 
  } 
};

You’ll find more examples and use cases in our blog, Types vs interfaces in TypeScript.

Conclusion

I hope this article helps you better understand the TypeScript landscape around passing functions and object literals as arguments to other functions. Here is a GitHub gist of all the code examples for testing.

Callbacks typically rely on passing functions to other functions, so you’ll often see heavy use of callbacks in any mature TypeScript codebase.

Happy coding!