Skip to content

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

@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

      pFad - Phonifier reborn

      Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

      Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


      Alternative Proxies:

      Alternative Proxy

      pFad Proxy

      pFad v3 Proxy

      pFad v4 Proxy