TypeScript - Use a generic type for a function

Question

If I have a function:

const flip = (A, B) => [B, A]

Add types to it:

const flip: <T1, T2>(A: T1, B: T2) => [T2, T1]
  = <T1, T2>(A: T1, B: T2) => [B, A];

Then extract the type:

type FlipFunction<T1, T2> = (A: T1, B: T2) => [T2, T1];

How can I use this type for an arrow function (function expression)?

Unfortunately this errors:

export const flip: FlipFunction<T1, T2>
  = <T1, T2>(A: T1, B: T2) => [B, A];

Cannot find name 'T1'.

As does this:

export const flip: <T1, T2>FlipFunction<T1, T2>
  = <T1, T2>(A: T1, B: T2) => [B, A];

(' expected.

playground for the above

Using a function declaration unfortunately doesn't seem to be an option:

https://github.com/microsoft/TypeScript/issues/22063

edit: for the problem I'm trying to solve, the type FlipFunction above is already defined, but as an interface, that I can't change

e.g.

interface Component<C,T> extends ComponentBase<ComponentProps<C,T>>

Shivam Singla · Accepted Answer · 2021-09-17 16:10:16Z

3

If you want the flip to be a generic function, do this instead-

type FlipFunction = <T1, T2>(A: T1, B: T2) => [T2, T1];
export const flip2: FlipFunction = <T1, T2>(A: T1, B: T2) => [B, A];

[Playground]

Explanation

When you are declaring FlipFunction as type FlipFunction<T1, T2> = (A: T1, B: T2) => [T2, T1];, it means you need to provide the concrete types for T1 and T2 while declaring the variable of type FlipFunction.

Taking a simpler example-

type MyType<T> = T

const myVar: MyType<string> = "lorem";

Here the type of myVar is string which we provided as concrete type in place of the generic T.

answered Sep 17, 2021 at 16:10

Shivam Singla

2,2112 gold badges12 silver badges23 bronze badges

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

5 Comments

Alasdair McLeay Over a year ago

Thanks! That makes sense and may help (still thinking it through), but unfortunately for the problem I'm trying to solve, I can't edit the type as it's already defined externally. I've added a clarification to the question. If I've understood your answer correctly, this wouldn't be possible by design, as my type for FlipFunction requires the types to be known at the point of definition, not at the point of being called.

Shivam Singla Over a year ago

What is your exact use case? Could you please write the type of imported declaration and also minimal use case for it.

Alasdair McLeay Over a year ago

The exact use case is fairly complex, and I was trying a few different routes to type it, one of the routes I got stuck with this and tried to distill it down to this issue, but I'll try describe the full issue here: I want a React component that looks like this: ``` const StyledHeading: styled('h1')<{size: number}>(); const Heading = ({ level, ...props }) => { return <StyledHeading size={LEVEL_SIZE[level]} {...props} />; }; ```

Alasdair McLeay Over a year ago

StyledHeading's type is defined by StyledComponent and StyledComponentBase here github.com/DefinitelyTyped/DefinitelyTyped/blob/… StyledComponentBase has a call signature to provide a polymorphic as prop. I want to inherit this call signature in my type for Heading as that I get the polymorphic as prop, which when used would allow additional props.

Alasdair McLeay Over a year ago

Your answer has already helped me get a much better understanding of what is happening though, so I'll try typing it again with this in mind.

Collectives™ on Stack Overflow

TypeScript - Use a generic type for a function

1 Answer 1

Explanation

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Explanation

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related