jsx-eslint/eslint-plugin-react

react/prop-types & TypeScript: false positive with HTMLAttributes prop type

Open

#3325 aperta il 8 lug 2022

Vedi su GitHub
 (3 commenti) (4 reazioni) (0 assegnatari)JavaScript (2797 fork)batch import
bughelp wantedtypescript

Metriche repository

Star
 (8630 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

Using React.HTMLAttributes<HTMLButtonElement> as the prop type in a component definition causes false positives of react/prop-types.

Strangely enough, when adding indirection by extending that same type in an interface, the problem goes away. The same technique applied to a type alias for the same type does not work, however.

Even stranger, the last case in the minimal working example below shows a case where prop type T gives the false positive while T & T does not.

Version: eslint-plugin-react@7.30.1

Minimal working example:

import React from "react";

// ERROR: 'className' is missing in props validation  react/prop-types
const MyComponent = ({ className }: React.HTMLAttributes<HTMLButtonElement>) => null;

// ERROR: 'className' is missing in props validation  react/prop-types
type TypeAlias = React.HTMLAttributes<HTMLButtonElement>;
const MyComponent_Alias = ({ className }: TypeAlias) => null;

// ERROR: 'className' is missing in props validation  react/prop-types
interface ExtendedTypeAlias extends TypeAlias {}
const MyComponent_ExtendedAlias = ({ className }: ExtendedTypeAlias) => null;

// OK
interface ExtendedInterface extends React.HTMLAttributes<HTMLButtonElement> {}
const MyComponent_ExtendedInterface = ({ className }: ExtendedInterface) => null;

// OK !?
const MyComponent_AliasSelfIntersection = ({ className }: TypeAlias & TypeAlias) => null;

Guida contributor