How to make generic interface types for functions in TypeScript?
Tags: typescript
Published: 2022-01-15 00:00:00

---
  title: How to make generic interface types for functions in TypeScript?
  published: true
  tags: TypeScript
  date: Sat Jan 15 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-generic-interface-types-for-functions-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-74f6e3029a9d8f68cbf028b62b43165f.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-generic-interface-types-for-functions-typescript)
  
To make generic interface types for functions in TypeScript, we can use the `interface` type declaration and inside the type declaration body, we can write the generic `Type` parameter name inside the angled bracket symbol (`<>`) followed by the function call signature and use the generic type parameter in the call signature wherever is needed.

### TL;DR

```ts
// a generic interface for function
// that returns the length of the array
interface GenericArrLenFn {
  <Type>(arr: Type[]): number;
}

// use the `GenericArrLenFn` function interface
// on a variable as its type
// This is valid ✅ and satisfies
// the `GenericArrLenFn` interface
let getArrLength: GenericArrLenFn = <GeneralType>(
  arr: GeneralType[]
): number => {
  return arr.length;
};

// call the function with
// different array value types
getArrLength(["John Doe", "Roy", "Lily"]); // 3
getArrLength([1, 2, 3, 4]); // 4
getArrLength([true, false]); // 2
```

For example, let's say we need to make a generic interface for a function where the function returns the length of the array that is passed to the function as an argument.

So to start, let's first start by writing the function code without any types. It may look like this,

```ts
// a function that returns
// the length of the arrray
function getArrLength = (arr) => {
    return arr.length;
}
```

Now that we have defined the function and the logic, let's make a generic interface for functions like above so that the generic interface can be used as a type for functions similar to the above.

Let's first write the name of the `generic function interface` like this,

```ts
// a generic interface for function
// that returns the length of the array
interface GenericArrLenFn {
  // cool code here
}
```

Now let's write the `generic call signature` for the functions by first writing out the generic `Type` parameter inside the angled brackets symbol (`<>`) followed by the function call signature.

```ts
// a generic interface for function
// that returns the length of the array
interface GenericArrLenFn {
  <Type>(arr: Type[]): number;
}
```

As you can see from the above `GenericArrLenFn` interface we have defined the generic parameter type called `Type` and used the general type parameter as the type for the `arr` parameter. Also, note that we have used the `Type[]`, this is because from our function logic we need the `arr` parameter to hold an array of whatever type that is passed to the generic `Type` parameter.

Let's now use the `GenericArrLenFn` generic function interface for a variable so that the variable can only hold a function that satisfies the `GenericArrLenFn` interface.

It can be done like this,

```ts
// a generic interface for function
// that returns the length of the array
interface GenericArrLenFn {
  <Type>(arr: Type[]): number;
}

// use the `GenericArrLenFn` function interface
// on a variable as its type
// This is valid ✅ and satisfies
// the `GenericArrLenFn` interface
let getArrLength: GenericArrLenFn = <GeneralType>(
  arr: GeneralType[]
): number => {
  return arr.length;
};
```

As you can see that the above function declaration is valid and satisfies the `GenericArrLenFn` interface.

After defining the function and the using type, let's now call the function with different array value types like this,

```ts
// a generic interface for function
// that returns the length of the array
interface GenericArrLenFn {
  <Type>(arr: Type[]): number;
}

// use the `GenericArrLenFn` function interface
// on a variable as its type
// This is valid ✅ and satisfies
// the `GenericArrLenFn` interface
let getArrLength: GenericArrLenFn = <GeneralType>(
  arr: GeneralType[]
): number => {
  return arr.length;
};

// call the function with
// different array value types
getArrLength(["John Doe", "Roy", "Lily"]); // 3
getArrLength([1, 2, 3, 4]); // 4
getArrLength([true, false]); // 2
```

All the function calls are valid and return the appropriate length of the array as expected.

We have successfully made a generic interface type for the function in TypeScript. Yay! 🥳

See the code live in [codesandbox](https://codesandbox.io/s/make-generic-interface-types-for-functions-typescript-3qzoz?file=/src/index.ts).

That's all 😃!

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

---