[Fix] propTypes: Handle TSTypeReference in no-unused-prop-types

Co-authored-by: Markus Olsson <[email protected]>
Co-authored-by: Jordan Harband <[email protected]>

Author: niik

CHANGELOG.md

@@ -14,6 +14,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`prop-types`], `propTypes`: add support for exported type inference ([#3163][] @vedadeepta)
 * [`no-invalid-html-attribute`]: allow 'shortcut icon' on `link` ([#3174][] @Primajin)
 * [`prefer-exact-props`] improve performance for `Identifier` visitor ([#3190][] @meowtec)
+* `propTypes`: Handle TSTypeReference in no-unused-prop-type ([#3195][] @niik)
 
 ### Changed
 * [readme] change [`jsx-runtime`] link from branch to sha ([#3160][] @tatsushitoji)
@@ -23,6 +24,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [Docs] [`display-name`]: improve examples ([#3189][] @golopot)
 * [Refactor] [`no-invalid-html-attribute`]: sort HTML_ELEMENTS and messages ([#3182][] @Primajin)
 
+[#3195]: https://github.com/yannickcr/eslint-plugin-react/pull/3195
 [#3191]: https://github.com/yannickcr/eslint-plugin-react/pull/3191
 [#3190]: https://github.com/yannickcr/eslint-plugin-react/pull/3190
 [#3189]: https://github.com/yannickcr/eslint-plugin-react/pull/3189

lib/util/propTypes.js

@@ -967,6 +967,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
           ignorePropsValidation = true;
         }
         break;
+      case 'TSTypeReference':
       case 'TSTypeAnnotation': {
         const tsTypeAnnotation = new DeclarePropTypesForTSTypeAnnotation(propTypes, declaredPropTypes);
         ignorePropsValidation = tsTypeAnnotation.shouldIgnorePropTypes;

tests/lib/rules/no-unused-prop-types.js

@@ -6486,6 +6486,23 @@ ruleTester.run('no-unused-prop-types', rule, {
         };
       `,
       errors: [{ message: '\'foo\' PropType is defined but prop is never used' }],
+    },
+
+    {
+      code: `
+        interface Props {
+          readonly firstname: string;
+          readonly lastname: string;
+        }
+
+        class TestComponent extends React.Component<Props> {
+          public render() {
+            return <div>{this.props.firstname}</div>;
+          }
+        }
+      `,
+      features: ['ts', 'no-babel'],
+      errors: [{ message: '\'lastname\' PropType is defined but prop is never used' }],
     }
   )),
 });