[Refactor] propTypes: extract type params to var

Author: HenryBrown0

CHANGELOG.md

@@ -14,7 +14,11 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`jsx-key`]: detect conditional returns ([#3630][] @yialo)
 * [`jsx-newline`]: prevent a crash when `allowMultilines ([#3633][] @ljharb)
 
+### Changed
+* [Refactor] `propTypes`: extract type params to var ([#3634][] @HenryBrown0)
+
 [#3638]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3638
+[#3634]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3634
 [#3633]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3633
 [#3630]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3630
 [#3623]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3623

lib/util/propTypes.js

@@ -627,7 +627,8 @@ module.exports = function propTypesInstructions(context, components, utils) {
         typeName = node.typeName.name;
         const leftMostName = getLeftMostTypeName(node.typeName);
         const shouldTraverseTypeParams = genericReactTypesImport.has(leftMostName);
-        if (shouldTraverseTypeParams && node.typeParameters && node.typeParameters.length !== 0) {
+        const nodeTypeParams = node.typeParameters;
+        if (shouldTraverseTypeParams && nodeTypeParams && nodeTypeParams.length !== 0) {
           // All react Generic types are derived from:
           // type PropsWithChildren<P> = P & { children?: ReactNode | undefined }
           // So we should construct an optional children prop
@@ -638,7 +639,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
           const idx = genericTypeParamIndexWherePropsArePresent[
             leftMostName !== rightMostName ? rightMostName : importedName
           ];
-          const nextNode = node.typeParameters.params[idx];
+          const nextNode = nodeTypeParams.params[idx];
           this.visitTSNode(nextNode);
           return;
         }
@@ -727,9 +728,10 @@ module.exports = function propTypesInstructions(context, components, utils) {
 
     convertReturnTypeToPropTypes(node) {
       // ReturnType<T> should always have one parameter
-      if (node.typeParameters) {
-        if (node.typeParameters.params.length === 1) {
-          let returnType = node.typeParameters.params[0];
+      const nodeTypeParams = node.typeParameters;
+      if (nodeTypeParams) {
+        if (nodeTypeParams.params.length === 1) {
+          let returnType = nodeTypeParams.params[0];
           // This line is trying to handle typescript-eslint-parser
           // typescript-eslint-parser TSTypeQuery is wrapped by TSTypeReference
           if (astUtil.isTSTypeReference(returnType)) {
@@ -761,8 +763,9 @@ module.exports = function propTypesInstructions(context, components, utils) {
                     case 'ObjectExpression':
                       iterateProperties(context, res.properties, (key, value, propNode) => {
                         if (propNode && propNode.argument && propNode.argument.type === 'CallExpression') {
-                          if (propNode.argument.typeParameters) {
-                            this.visitTSNode(propNode.argument.typeParameters);
+                          const propNodeTypeParams = propNode.argument.typeParameters;
+                          if (propNodeTypeParams) {
+                            this.visitTSNode(propNodeTypeParams);
                           } else {
                             // Ignore this CallExpression return value since it doesn't have any typeParameters to let us know it's types.
                             this.shouldIgnorePropTypes = true;
@@ -960,8 +963,9 @@ module.exports = function propTypesInstructions(context, components, utils) {
         break;
       case 'GenericTypeAnnotation':
         if (propTypes.id.name === '$ReadOnly') {
+          const propTypeParams = propTypes.typeParameters;
           ignorePropsValidation = declarePropTypesForObjectTypeAnnotation(
-            propTypes.typeParameters.params[0],
+            propTypeParams.params[0],
             declaredPropTypes
           );
         } else {
@@ -1011,9 +1015,9 @@ module.exports = function propTypesInstructions(context, components, utils) {
         )
       )
     ) {
-      const propTypes = node.parent.typeParameters.params[1];
+      const propTypesParams = node.parent.typeParameters;
       const declaredPropTypes = {};
-      const obj = new DeclarePropTypesForTSTypeAnnotation(propTypes, declaredPropTypes);
+      const obj = new DeclarePropTypesForTSTypeAnnotation(propTypesParams.params[1], declaredPropTypes);
       components.set(node, {
         declaredPropTypes: obj.declaredPropTypes,
         ignorePropsValidation: obj.shouldIgnorePropTypes,