Introduction to function type in TypeScript

Introduction to TypeScript function type:

This post will show you what is a function type in TypeScript and how to use it with examples.

YouTube video:

I have published one video on YouTube on function type in TypeScript. You can watch it here:

If you love this video, please subscribe to my channel.

Passing a function as the parameter:

We can pass a function as the parameter to another function. Let's take a look at the below program:

function execute(x: (m: string) => void) {
  x("Hello World");
}

function printMessage(msg: string) {
  console.log(msg);
}

execute(printMessage);

In this example,

The execute function takes another function as its parameter. This parameter function should take one string as the parameter and it returns nothing(void). The name of the parameter is x. Inside the function execute, it executes the function x and passes one string to this function.
The printMessage is another function that takes one string as the parameter and returns none. It prints the content of the parameter.
At the end of the function, it uses the execute function and passes the printMessage function to it.
In this execute function, it passes the Hello World string to the printMessage function and this function will print this string.

If you run this program, it will print:

Hello World

Function type:

In the above example, the function type is (m: string) => void. It defines a function that can take one string as the parameter and returns none.

We can also create type variables.

type printType = (m: number) => number;

function execute(x: printType) {
  console.log(x(2));
}

function findSquare(x: number): number {
  return x * x;
}

function findCube(x: number): number {
  return x * x * x;
}

execute(findSquare);
execute(findCube);

Here,

We created a function type printType. This is used as the parameter for the execute function.
The execute function takes the findSquare and findCube functions as the parameters. It will print the square and cube of 2.

4
8

Type inference:

If we don't specify the type in the function type, TypeScript can choose the type automatically. This is called type inference.

function execute<T>(value: T, x: (m: T) => void) {
  x(value);
}

function printSquare(x: number): void {
  console.log(`${x} * ${x} = ${x * x}`);
}

function printSquareString(x: string): void {
  console.log(`${x} * ${x} = ${parseInt(x) * parseInt(x)}`);
}

execute(3, printSquare);
execute('3', printSquareString);

In this example, the execute function takes one parameter of type T and one function type with the parameter as T. The type of the first parameter and the type of the parameter of the function should be the same.

In the first execute call, the first parameter is an integer and the parameter of the printSquare function is also an integer. In the second execute call, the first parameter is a string and the parameter of the printSquareString is also a string.

If you run the above program, it will print:

3 * 3 = 9
3 * 3 = 9