Eslint-plugin-react: Typescript false positive "missing in props validation" on interfaces

Created on 19 Jul 2020  路  7Comments  路  Source: yannickcr/eslint-plugin-react

When creating a type with interface...extends the props from the type that is being extended are ignored.

The following for example throws 'style' is missing in props validation eslint(react/prop-types):

interface ThingProps extends React.HTMLAttributes<HTMLDivElement> {
  thing?: number
}

export const Thing = ({ thing = 1, style, ...props }: ThingProps) => {
//...
}

This however works perfectly:

interface ThingProps extends React.HTMLAttributes<HTMLDivElement> {
  thing?: number
}

export const Thing = ({ thing = 1, style, ...props }: ThingProps & React.HTMLAttributes<HTMLDivElement>) => {
//...
}
bug help wanted typescript

Most helpful comment

Appears to be fixed in 7.20.4.

All 7 comments

Same for me. This broke when upgrading from 7.20.0 to 7.20.1+ (ESLint 7.5.0)

Same here, rolling back to 7.20.0 resolved the issue for now, seems the .1 patch broke this.

Appears to be fixed in 7.20.4.

I'm unfortunately still seeing this in certain scenarios.

Right now I'm seeing the issue with an example like so:

// `SelectableFileCardProps` and `DNDMovableToBoardItemProps` are interfaces in another file imported in here
// `SelectableFileCardProps` extends off of an another imported file in it's own file
interface DragDroppableFileShellProps extends
  SelectableFileCardProps, Pick<DNDMovableToBoardItemProps, 'onDragStart'>
{
  children: React.ReactNode;
}

@kylemh cross-file static analysis is not something that's done in most eslint plugins, and certainly not in this one; unless the TS eslint parser provides that information, it can't work (and i'd expect if it did provide that information, it would already work)

Hmmm... Is there something I can do to get cross-file static analysis working or should I simply disable this rule?

The TypeScript eslint parser could certainly be updated to provide this information. I'd start by making test cases here, confirm that they fail, try to figure out where in the AST nodes the information is missing, and then file an issue/PR on the TS eslint parser.

Was this page helpful?
0 / 5 - 0 ratings