Skip to content

Generic parameter in arrow function in .tsx file causes an errorΒ #45589

Closed
@danfma

Description

@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 ;) ).

Metadata

Metadata

Assignees

No one assigned

    Labels

    DuplicateAn existing issue was already created

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions