Function Types in TypeScript

Function Types describe the parameter and return types of a function i.e. they describe the function. Typescript has a built-in global type Function, which is a generic type that we can use to describe all functions. In this tutorial, we will learn how to create a type for a function using Function Type Expressions and Function Call Signatures, etc.

Function Type

The following code results in a compiler error. Because we declared num to be a number but tried to assign a string to it.

Now take a look at the following code. We are assigning a function to the variable sumFn. However, we have not assigned a type to sumFn. The compiler will assigns any type to it, which means you can assign anything to it.

How do we ensure that it only stores a function?

Typescript has a data type for it and it is called Function.

Global Type Function

TypeScript has a global data type Function. You can use it to annotate a variable just like any other data type. In the following example, we annotate sumFn with the data type Function. Now you can only assign a function to it and nothing else.

The Function data type describes properties like bind, call, apply, etc. It is a generic type that applies to all functions. But it does not provide any information about the parameters and return type of the function.

For example, assigning type Function to sumFn prevents us from assigning anything other than function to it. But it will not stop us from assigning functions with different parameters and return types.

How do we stop such assignments?

We can do that by creating a type that describes the Parameter and Return Type of a function. i.e. we create custom Type for the functions

There are three ways in which we can create a function type in TypeScript.

  1. Function Type Expression
  2. Function Call Signature
  3. Construct Signature

Function Type Expressions

Function Type expressions or Function type literals are the simplest way in which you can create a function type. It consists of two parts. List of Parameters and a Return type. The following is the syntax of the function type.

Where para1, para2, etc are the parameters of the function. We need to give names to the parameters. But the typescript compiler ignores the names while checking if the two function types are compatible. The parameters must be enclosed inside the bracket.

It is followed by a => and the return type. Specifying the return type is mandatory. If the function does not return anything use void as the return type.

The following is an example of a function type that accepts two numbers (num1 & num2) and returns a number.

We can use it to annotate any variable. In the following code, we assign the function type to a variable named addFn.

Assigining Function type to a variable

We can now assign any function which accepts two number parameters and returns a number to the variable addFn. The compiler will not complain as long as the function signature matches. This is because typescript follows what is known as structural typing. In the following code, we have assigned a function that multiplies two numbers to addFn. The compiler will not throw errors because the function call signature matches the type of addFn

But when we assign a function with a different signature compiler throws an error. In the following example, we are trying to assign a function that accepts three-parameter to the addFn variable.

You can omit the type of parameters (a & b) when creating the function. They are automatically inferred by the compiler.

You can also assign a function when declaring the variable as shown below

Again you can omit the types as they are inferred.

Use void if the function does not return

Type Alias

You can use a Type Alias to give a name to the type and re-use it.

We cannot use an Interface to describe a function using function type expression. Because Interface describes an object. To use an Interface to describe the function, we need to use the function call signature inside an object.

Type Inference of Function Types

Typescript infers the type when we assign a function expression to a variable.

Hovering the mouse over the avgFn will show you the inferred type of avgFn.

Typescript infers the function Type

Function Call Signatures

The syntax for creating Function Call Signatures is very similar to the Function Type Expression. The only difference is that call signatures use : between the parameter list and the return type while the function type expressions use =>.

Call Signatures are used in an object type. Hence we can use it to describe

  1. Function
  2. Methods of an object or class.
  3. Functions with a property.


To describe a function as a property of an object first use curly brackets {} to indicate that it is an object. Inside the curly braces { } include the function call signature. Note that we cannot use Function type expressions inside the {}.

The following is an example usage of a call signature that describes a function.

The following codes describe the function using both function type expression and function call signature.

You can use a Type Alias or Interface to name the function type.

Method of an object/class

The following code shows how to describe a method when we describe an object type. We describe the method by stating the method name followed by the call signature.

Use an interface or type alias to assign name to the type.

Functions with Property

Functions are objects, hence they also can have properties. We can use the call signatures to create a type for them. The following addFn has a foo property. We use the Object.assign(target, source) to create an instance from the type.

Construct Signatures

We can also call the functions with new the operator to create a new object. Such functions are known as constructor functions. We can use the Construct Signatures to describe its parameter list and return type. The syntax is identical to call signatures, except that we write a new keyword in front of the call signature.

You can read more about them here and here


More on Functions

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top