Typescript: generic functional type/interface for arrow function

Question

Ok, I have the following scenario:

type IHashFn = (arg: string) => number;
const hash: IHashFn = (arg) => {
  return 42;
}

So far, so good. Now I want the function to be generic.

const hash: <T> (arg: T) => number = (arg) => {
  return 42;
}

That works. But this doesn't:

type IHashFn<T> = (arg: T) => number;
const hash: <T> IHashFn<T> = (arg) => {
  return 42;
}

I found no way to calm down the TS compiler. Using interfaces instead of type aliases doesn't work either.

Note: I dont't want hash to be an implementation for IHashFn<string> but generic as well.

Is there a way to declare generic function types or interfaces in TypeScript at all?

Alex Wayne · Accepted Answer · 2020-04-22 23:01:14Z

4

You aren't really doing anything with your generic parameter.

But it sounds like you want a generic function, not a generic type alias. So leave it on the function, and off of the type alias.

type IHashFn = <T>(arg: T) => number;

const hash: IHashFn = (arg) => {
  return 42;
}

edited Apr 22, 2020 at 23:01

answered Apr 22, 2020 at 22:56

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

antoHuman · Accepted Answer · 2025-06-02 10:33:09Z

2

The solution is to use the built-in Typescript utilities Parameters and ReturnType.

For your case:

type IHashFn<T> = (arg: T) => number;
const hash: <T> (...args: Parameters<IHashFn<T>>) => ReturnType<IHashFn<T>> = (arg) => {
  return 42;
}

There might be a cleaner way with the keyword infer used directly, but I could not find it. Maybe someone else can add it here.

I had the same question and it was impossible to find a solution for me, I had to learn about the existence of these utilities and figure it out by myself.

In my case, I wanted to take advantage of the existing React.FunctionComponent (or React.FC) type alias, while using a generic.

List of utility types: https://www.typescriptlang.org/docs/handbook/utility-types.html

More info on infer: https://blog.logrocket.com/understanding-infer-typescript/

edited Jun 2 at 10:33

answered Jan 14, 2022 at 10:00

antoHuman

3582 silver badges10 bronze badges

3 Comments

akrinah Over a year ago

Oof, one year ago. I remember that I was playing with React.FC for a generic createRoute function.

Raphael Schweikert Over a year ago

Thanks. That’s a clever, albeit verbose, solution. I did have to substitute ReturnType for ResultType, though. Maybe that was renamed at some point?

antoHuman Jun 2 at 10:36

It was ReturnType, not ResultType, I don't know how I made this mistake

Artyer · Accepted Answer · 2020-04-22 23:07:21Z

0

You can simply use IHashFn<any>. This will be usable where IHashFn<string> is expected too.

If you truly want it to still be a generic function type, you could do something like this:

type IHashFn<T = any> = <U extends T>(arg: U) => number;

answered Apr 22, 2020 at 23:07

Artyer

44.2k3 gold badges80 silver badges109 bronze badges

Collectives™ on Stack Overflow

Typescript: generic functional type/interface for arrow function

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related