[Fix] function-component-definition, boolean-prop-naming, jsx-first-prop-new-line, jsx-props-no-multi-spaces, propTypes: use type args

Author: HenryBrown0

CHANGELOG.md

@@ -1,4 +1,5 @@
 # Change Log
+
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 This change log adheres to standards from [Keep a CHANGELOG](https://keepachangelog.com).
@@ -8,6 +9,9 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 ### Added
 * [`no-string-refs`]: allow this.refs in > 18.3.0 ([#3807][] @henryqdineen)
 
+### Fixed
+* [`function-component-definition`], [`boolean-prop-naming`], [`jsx-first-prop-new-line`], [`jsx-props-no-multi-spaces`], `propTypes`: use type args ([#3629][] @HenryBrown0)
+
 ### Changed
 * [Tests] add @typescript-eslint/parser v6 ([#3629][] @HenryBrown0)
 * [Tests] add @typescript-eslint/parser v7 and v8 ([#3629][] @hampustagerud)

lib/rules/boolean-prop-naming.js

@@ -259,14 +259,16 @@ module.exports = {
         return;
       }
 
-      const annotationTypeParams = component.node.parent.id.typeAnnotation.typeAnnotation.typeParameters;
+      const annotationTypeArguments = propsUtil.getTypeArguments(
+        component.node.parent.id.typeAnnotation.typeAnnotation
+      );
       if (
-        annotationTypeParams && (
-          annotationTypeParams.type === 'TSTypeParameterInstantiation'
-          || annotationTypeParams.type === 'TypeParameterInstantiation'
+        annotationTypeArguments && (
+          annotationTypeArguments.type === 'TSTypeParameterInstantiation'
+          || annotationTypeArguments.type === 'TypeParameterInstantiation'
         )
       ) {
-        return annotationTypeParams.params.find(
+        return annotationTypeArguments.params.find(
           (param) => param.type === 'TSTypeReference' || param.type === 'GenericTypeAnnotation'
         );
       }

lib/rules/function-component-definition.js

@@ -10,6 +10,7 @@ const Components = require('../util/Components');
 const docsUrl = require('../util/docsUrl');
 const reportC = require('../util/report');
 const getText = require('../util/eslint').getText;
+const propsUtil = require('../util/props');
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -34,12 +35,12 @@ const UNNAMED_FUNCTION_TEMPLATES = {
 };
 
 function hasOneUnconstrainedTypeParam(node) {
-  const nodeTypeParams = node.typeParameters;
+  const nodeTypeArguments = propsUtil.getTypeArguments(node);
 
-  return nodeTypeParams
-    && nodeTypeParams.params
-    && nodeTypeParams.params.length === 1
-    && !nodeTypeParams.params[0].constraint;
+  return nodeTypeArguments
+    && nodeTypeArguments.params
+    && nodeTypeArguments.params.length === 1
+    && !nodeTypeArguments.params[0].constraint;
 }
 
 function hasName(node) {
@@ -202,11 +203,12 @@ module.exports = {
         varType = node.parent.parent.kind;
       }
 
+      const nodeTypeArguments = propsUtil.getTypeArguments(node);
       return (fixer) => fixer.replaceTextRange(
         options.range,
         buildFunction(options.template, {
           typeAnnotation,
-          typeParams: getNodeText(node.typeParameters, source),
+          typeParams: getNodeText(nodeTypeArguments, source),
           params: getParams(node, source),
           returnType: getNodeText(node.returnType, source),
           body: getBody(node, source),

lib/rules/jsx-first-prop-new-line.js

@@ -7,6 +7,7 @@
 
 const docsUrl = require('../util/docsUrl');
 const report = require('../util/report');
+const propsUtil = require('../util/props');
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -55,7 +56,8 @@ module.exports = {
               report(context, messages.propOnNewLine, 'propOnNewLine', {
                 node: decl,
                 fix(fixer) {
-                  return fixer.replaceTextRange([(node.typeParameters || node.name).range[1], decl.range[0]], '\n');
+                  const nodeTypeArguments = propsUtil.getTypeArguments(node);
+                  return fixer.replaceTextRange([(nodeTypeArguments || node.name).range[1], decl.range[0]], '\n');
                 },
               });
             }

lib/rules/jsx-props-no-multi-spaces.js

@@ -8,6 +8,7 @@
 const docsUrl = require('../util/docsUrl');
 const eslintUtil = require('../util/eslint');
 const report = require('../util/report');
+const propsUtil = require('../util/props');
 
 const getSourceCode = eslintUtil.getSourceCode;
 const getText = eslintUtil.getText;
@@ -103,26 +104,26 @@ module.exports = {
     }
 
     function containsGenericType(node) {
-      const nodeTypeParams = node.typeParameters;
-      if (typeof nodeTypeParams === 'undefined') {
+      const nodeTypeArguments = propsUtil.getTypeArguments(node);
+      if (typeof nodeTypeArguments === 'undefined') {
         return false;
       }
 
-      return nodeTypeParams.type === 'TSTypeParameterInstantiation';
+      return nodeTypeArguments.type === 'TSTypeParameterInstantiation';
     }
 
     function getGenericNode(node) {
       const name = node.name;
       if (containsGenericType(node)) {
-        const type = node.typeParameters;
+        const nodeTypeArguments = propsUtil.getTypeArguments(node);
 
         return Object.assign(
           {},
           node,
           {
             range: [
               name.range[0],
-              type.range[1],
+              nodeTypeArguments.range[1],
             ],
           }
         );

lib/util/propTypes.js

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

lib/util/props.js

@@ -93,6 +93,18 @@ function isRequiredPropType(propTypeExpression) {
     && propTypeExpression.property.name === 'isRequired';
 }
 
+/**
+ * Returns the type arguments of a node or type parameters if type arguments are not available.
+ * @param {ASTNode} node The node to get the type arguments from.
+ * @returns {ASTNode} The type arguments or type parameters of the node.
+ */
+function getTypeArguments(node) {
+  if ('typeArguments' in node) {
+    return node.typeArguments;
+  }
+  return node.typeParameters;
+}
+
 module.exports = {
   isPropTypesDeclaration,
   isContextTypesDeclaration,
@@ -101,4 +113,5 @@ module.exports = {
   isDefaultPropsDeclaration,
   isDisplayNameDeclaration,
   isRequiredPropType,
+  getTypeArguments,
 };