Generic parameter in arrow function in .tsx file causes an error

[danfma]

Bug Report

🔎 Search Terms

typescript, generic, .tsx, react, function

🕗 Version & Regression Information

• This is the behavior in every version I tried from 4.0.5+.

⏯ Playground Link

Playground link with relevant code

💻 Code

import React, { useCallback } from 'react';

function MyComponent() {
  // Using a simple hook to cause the problem (not a real code)

  // This works
  const promisify = useCallback(
    // NOTE Current TypeScript version doesn't support generic in arrow functions in TSX files
    function <R>(value: R): Promise<R> {
      return Promise.resolve(value);
    },
    []
  );

  // This does not work - it also happens when removing the useCallback and just defining a simple function too.
  const promisify2 = useCallback(
    // NOTE Current TypeScript version doesn't support generic in arrow functions in TSX files
    <R>(value: R): Promise<R> => {
      return Promise.resolve(value);
    },
    []
  );

  return null;
}

🙁 Actual behavior

The compiler doesn't recognize the generic parameter when using an arrow function in a .tsx file and gives an error like if you are using a JSX element as a function.

🙂 Expected behavior

I should be able to define generic arrow functions in .tsx files too (I guess ;) ).

[MartinJohns]

Duplicate of #15713.

[typescript-bot]

This issue has been marked as a 'Duplicate' and has seen no recent activity. It has been automatically closed for house-keeping purposes.