How to set types or function type expression for a callback function in TypeScript?
Tags: typescript
Published: 2021-12-03 00:00:00

---
  title: How to set types or function type expression for a callback function in TypeScript?
  published: true
  tags: TypeScript
  date: Fri Dec 03 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/set-types-or-function-type-expressions-for-callback-functions-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-b20ca3d2f4dc003a4171565b733aba90.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/set-types-or-function-type-expressions-for-callback-functions-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

```ts
(parameterName: parameterType) => returnType;
```

### TL;DR

```ts
// 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,

```ts
// 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.

```ts
// 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,

```ts
// 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,

```ts
// 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,

```ts
// 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.

```ts
// 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,

```ts
// 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
```

Yay 🥳!. We have successfully made a function type expression for our callback function.

See the above code live in [codesandbox](https://codesandbox.io/s/set-types-or-function-type-expressions-for-callback-functions-typescript-mlny2?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---