forwardRef example has error in TypeScript

[valtism]

    "@types/react": "^17.0.11",
    "@types/react-dom": "^17.0.8",
    "@typescript-eslint/eslint-plugin": "^4.28.0",
    "@typescript-eslint/parser": "^4.28.0",

The code from https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ on forwardRef has the error 'children' is missing in props validation based on the react/propTypes ESLint rule https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md

This rule says it validates on prop-types typing, as well as TS types. I am not sure if this is an issue in ESLint or TypeScript

[valtism]

Moved from: typescript-cheatsheets/react#433

[JameelKhan9]

@valtism seems to work for me, as long as the proptype is not exported.

"@types/react": "^17.0.37",
"@typescript-eslint/eslint-plugin": "^5.6.0",
"@typescript-eslint/parser": "^5.6.0",

The following is with the export:

In saying that, I have no idea why exporting the type would break eslint from getting the proptype. 😕

seems similar to the discussion happening at #3140

[ljharb]

Probably because that's a different AST node name. a PR to fix it, or even with a failing test case, would be welcome

[JameelKhan9]

@ljharb happy to contribute with some guidance, not sure what "different AST node name" means unfortunately. Example of the failure in the above screenshot, below:

import React, { forwardRef } from "react";

export type Props = { children: React.ReactNode; type: "submit" | "button" };
export type Ref = HTMLButtonElement;
export const FancyButton = forwardRef<Ref, Props>((props, ref) => (
	<button ref={ref} className="MyClassName" type={props.type}>
		{props.children}
	</button>
));

FancyButton.displayName = "Button";

[ljharb]

@JameelKhan9 if you could make a PR that adds a failing test case, it'll be pretty easy for me to add a fix on top of that :-)

[vedadeepta]

@JameelKhan9 use https://astexplorer.net/ to check the ast node names, it not exactly the same in this case but its close.

i had a look at your issue and it seems the issue is stemming from this line:
https://github.com/yannickcr/eslint-plugin-react/blob/c3c97e38f96b1fdd11270dd8cb6e268a4f67c5c9/lib/util/propTypes.js#L647

and the the fix would be to add check for item.type === 'ExportNamedDeclaration' in the filter fn. exported types have the following ast node structure for typescript-eslint-parser. Slightly different for the other ts parser.

{
  type: 'ExportNamedDeclaration',
  declaration: {
    type: 'VariableDeclaration',
    range: [ 150, 348 ],
    loc: { start: [Object], end: [Object] },
    declarations: [ { declarations: {  {
    type: 'VariableDeclarator',
    id: {
        type: 'Identifier',
        range: [Array],
        loc: [Object],
        name: 'Props',
        parent: [Circular *1]
     }}
   ],
    kind: 'const',
    parent: [Circular *1]
  },
  range: [ 143, 348 ],
  loc: { start: { line: 7, column: 6 }, end: { line: 11, column: 9 } },
  specifiers: [],
  source: null,
}

Let me know if you're working on this pr or if you would like to pair program on this or should i create one.

[JameelKhan9]

Thanks, @vedadeepta and @ljharb, unfortunately, I was covid impacted not long after commenting here. Appreciate the assistance and offer for pair programming.

[vedadeepta]

@JameelKhan9 sorry to hear, i hope you're doing well know, in hindsight i should've waited a bit longer :(