How to set types or function type expression for a callback function in TypeScript?

If you want to set the types or function type expressions for a callback function, you can write the parameter name followed by the : symbol (colon symbol). After that, you can write an opening and closing bracket (). Within the brackets, you can write the parameter name followed by the : (colon) symbol and then the type of the parameter. Following the braces, you should write an assignment operator followed by a greater than symbol (=>) followed by the type of the value you want to be returned from the function call.

Syntax for function type expression

(parameterName: parameterType) => returnType;

TL;DR

// Type alias for age verification function type expression
type AgeVerificationFunc = (age: number) => boolean;

// a function which accepts a callback function
// where it needs to have a parameter called age
// and should return a value of boolean type
function verifyAge(ageVerficationFunc: AgeVerificationFunc, age: number) {
  return ageVerficationFunc(age);
}

// callback function
const verifyAgeCb = (age: number) => age > 32;

// call the function with a callback function
// as first argument and `23` as the second argument
const isValid = verifyAge(verifyAgeCb, 23);

// log the output
console.log(isValid); // false

For example, let's say we need to make a function type expression (aka type declaration for the entire function) where we need to have a parameter called age with a type of number and the function's return value should be of boolean type.

So if we write a function type expression according to the above definition.

It may look like this,

// A simple function type expression
// where the function first parameter name is age of type number
// and the return value should be of boolean type
(age: number) => boolean;

Note that this is just a structure and not a function.

The purpose of the above function type expression is to enforce the parameter types and the return types and not the logic of the function.

Now let's use the above function type expression use it as a type for a callback function parameter.

// a function which accepts a callback function
// where it needs to have a parameter called age
// and should return a value of boolean type
function verifyAge(ageVerficationFunc: (age: number) => boolean) {
  return ageVerficationFunc();
}

Now that we have defined the function type expression for our callback function, let's also use another parameter called age with a type of number and pass that when we call our callback function inside the function.

It can be done like this,

// a function which accepts a callback function
// where it needs to have a parameter called age
// and should return a value of boolean type
function verifyAge(ageVerficationFunc: (age: number) => boolean, age: number) {
  return ageVerficationFunc(age);
}

Now let's call the verifyAge function and pass a callback function that satisfies the function type expression we defined for our callback function and also pass the value of 23 for the age parameter which is then passed to the callback function which will return a value of boolean type upon on verification of the age.

it can be done like this,

// a function which accepts a callback function
// where it needs to have a parameter called age
// and should return a value of boolean type
function verifyAge(ageVerficationFunc: (age: number) => boolean, age: number) {
  return ageVerficationFunc(age);
}

// call the function with a callback function
// as first argument and `23` as the second argument
verifyAge((age: number) => age > 32, 23);

Now let's also clean up a little bit by writing the callback function outside the verifyAge function like this,

// a function which accepts a callback function
// where it needs to have a parameter called age
// and should return a value of boolean type
function verifyAge(ageVerficationFunc: (age: number) => boolean, age: number) {
  return ageVerficationFunc(age);
}

// callback function
const verifyAgeCb = (age: number) => age > 32;

// call the function with a callback function
// as first argument and `23` as the second argument
verifyAge(verifyAgeCb, 23);

Now, If we log the output of the verifyAge function call to the console we can see that it will return the boolean value of false which is exactly what we need to see.

// a function which accepts a callback function
// where it needs to have a parameter called age
// and should return a value of boolean type
function verifyAge(ageVerficationFunc: (age: number) => boolean, age: number) {
  return ageVerficationFunc(age);
}

// callback function
const verifyAgeCb = (age: number) => age > 32;

// call the function with a callback function
// as first argument and `23` as the second argument
const isValid = verifyAge(verifyAgeCb, 23);

// log the output
console.log(isValid); // false

Now to make it a little more clear let's also use a type alias for our function type expression.

it can be done like this,

// Type alias for age verification function type expression
type AgeVerificationFunc = (age: number) => boolean;

// a function which accepts a callback function
// where it needs to have a parameter called age
// and should return a value of boolean type
function verifyAge(ageVerficationFunc: AgeVerificationFunc, age: number) {
  return ageVerficationFunc(age);
}

// callback function
const verifyAgeCb = (age: number) => age > 32;

// call the function with a callback function
// as first argument and `23` as the second argument
const isValid = verifyAge(verifyAgeCb, 23);

// log the output
console.log(isValid); // false