Skip to content

[no-unnecessary-type-constraint] false positive for generic type with default type on arrow function in a JSX/TSX file #4062

Closed
@AllySummers

Description

@AllySummers
  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest version of the packages.
  • I have read the FAQ and my problem is not listed.

Repro
https://github.com/AllySummers/typescript-eslint-jsx-generics
Repo has eslint v8 and typescript-eslint v5, issue still happens on eslint 7 and typescript-eslint 4 (including alpha).
To install eslint v7/typescript-eslint v4 in that repo do this:
npm i --save @typescript-eslint/eslint-plugin@4.33.1-alpha.15 @typescript-eslint/eslint-plugin@4.33.1-alpha.15 eslint@7.32.0

The issue can also be seen from running npm run lint

not-working.tsx

export interface GenericComponentProps<T> {
  prop: T
}

export const GenericComponent = <T>(props: GenericComponentProps<T>) => (
  <div>hello</div>
);
// Error: 5:70  error  Parsing error: Unexpected token. Did you mean `{'>'}` or `&gt;`?

working.tsx (sort-of)

export interface GenericComponentProps<T> {
  prop: T
}

export const GenericComponent = <T extends unknown = unknown>(props: GenericComponentProps<T>) => (
  <div>hello</div>
);
// Error: 5:34  error  Constraining the generic type `T` to `unknown` does nothing and is unnecessary  @typescript-eslint/no-unnecessary-type-constraint

Please consider creating an isolated reproduction repo to make it easy for the volunteer maintainers debug your issue.
-->

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "rules": {
    "@typescript-eslint/no-unnecessary-type-constraint": "error"
  }
}

Expected Result

Typescript eslint should not issue a warning as the suggested code (as below)

Actual Result

The code provided in working.tsx is required due to how generics are parsed in Typescript/React, one cannot simply write <T>.

Additional Info
The attempted fix is invalid code:

export const GenericComponent = <T, = unknown>(props: GenericComponentProps<T>) => (
  <div>hello</div>
);

Versions
(Tested both)

package version
@typescript-eslint/eslint-plugin 5.2.0
@typescript-eslint/parser 5.2.0
TypeScript 4.4.4
ESLint 8.1.0
node 14.16.0
package version
@typescript-eslint/eslint-plugin 4.33.1-alpha.15
@typescript-eslint/parser 4.33.1-alpha.15
TypeScript 4.4.4
ESLint 7.32.0
node 14.16.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    accepting prsGo ahead, send a pull request that resolves this issuebugSomething isn't workingpackage: eslint-pluginIssues related to @typescript-eslint/eslint-plugin

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions