From 36482a3805cfb0a5fd3b9ce259702561f42d3661 Mon Sep 17 00:00:00 2001
From: Markus Olsson <j.markus.olsson@gmail.com>
Date: Tue, 1 Feb 2022 17:22:20 +0100
Subject: [PATCH] [Fix] `propTypes`: Handle TSTypeReference in
 no-unused-prop-types

Co-authored-by: Markus Olsson <j.markus.olsson@gmail.com>
Co-authored-by: Jordan Harband <ljharb@gmail.com>
---
 CHANGELOG.md                            |  2 ++
 lib/util/propTypes.js                   |  1 +
 tests/lib/rules/no-unused-prop-types.js | 17 +++++++++++++++++
 3 files changed, 20 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 69e72f0ae1..505391dc42 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/lib/util/propTypes.js b/lib/util/propTypes.js
index de1e01421a..6a61dc2713 100644
--- a/lib/util/propTypes.js
+++ b/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;
diff --git a/tests/lib/rules/no-unused-prop-types.js b/tests/lib/rules/no-unused-prop-types.js
index 5080ec8a63..eafe02d4e9 100644
--- a/tests/lib/rules/no-unused-prop-types.js
+++ b/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' }],
     }
   )),
 });