How to make generic interface types for functions in TypeScript?

Originally posted here!

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

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

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

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

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

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

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

That's all 😃!

Feel free to share if you found this useful 😃.