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

Author: HenryBrown0

lib/rules/boolean-prop-naming.js

@@ -250,7 +250,8 @@ module.exports = {
         return;
       }
 
-      const annotationTypeParams = component.node.parent.id.typeAnnotation.typeAnnotation.typeParameters;
+      const typeAnnotation = component.node.parent.id.typeAnnotation.typeAnnotation;
+      const annotationTypeParams = typeAnnotation.typeArguments || typeAnnotation.typeParameters;
       if (
         annotationTypeParams && (
           annotationTypeParams.type === 'TSTypeParameterInstantiation'

lib/rules/function-component-definition.js

@@ -33,7 +33,7 @@ const UNNAMED_FUNCTION_TEMPLATES = {
 };
 
 function hasOneUnconstrainedTypeParam(node) {
-  const nodeTypeParams = node.typeParameters;
+  const nodeTypeParams = node.typeArguments || node.typeParameters;
 
   return nodeTypeParams
     && nodeTypeParams.params
@@ -205,7 +205,7 @@ module.exports = {
         options.range,
         buildFunction(options.template, {
           typeAnnotation,
-          typeParams: getNodeText(node.typeParameters, source),
+          typeParams: getNodeText(node.typeArguments || node.typeParameters, source),
           params: getParams(node, source),
           returnType: getNodeText(node.returnType, source),
           body: getBody(node, source),

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

@@ -54,7 +54,7 @@ module.exports = {
               report(context, messages.propOnNewLine, 'propOnNewLine', {
                 node: decl,
                 fix(fixer) {
-                  return fixer.replaceTextRange([(node.typeParameters || node.name).range[1], decl.range[0]], '\n');
+                  return fixer.replaceTextRange([(node.typeArguments || node.typeParameters || node.name).range[1], decl.range[0]], '\n');
                 },
               });
             }

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

@@ -98,7 +98,7 @@ module.exports = {
     }
 
     function containsGenericType(node) {
-      const nodeTypeParams = node.typeParameters;
+      const nodeTypeParams = node.typeArguments || node.typeParameters;
       if (typeof nodeTypeParams === 'undefined') {
         return false;
       }
@@ -109,7 +109,7 @@ module.exports = {
     function getGenericNode(node) {
       const name = node.name;
       if (containsGenericType(node)) {
-        const type = node.typeParameters;
+        const type = node.typeArguments || node.typeParameters;
 
         return Object.assign(
           {},

lib/util/propTypes.js

@@ -627,7 +627,7 @@ 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;
+        const nodeTypeParams = node.typeArguments || node.typeParameters;
         if (shouldTraverseTypeParams && nodeTypeParams && nodeTypeParams.length !== 0) {
           // All react Generic types are derived from:
           // type PropsWithChildren<P> = P & { children?: ReactNode | undefined }
@@ -728,7 +728,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
 
     convertReturnTypeToPropTypes(node) {
       // ReturnType<T> should always have one parameter
-      const nodeTypeParams = node.typeParameters;
+      const nodeTypeParams = node.typeArguments || node.typeParameters;
       if (nodeTypeParams) {
         if (nodeTypeParams.params.length === 1) {
           let returnType = nodeTypeParams.params[0];
@@ -763,7 +763,8 @@ module.exports = function propTypesInstructions(context, components, utils) {
                     case 'ObjectExpression':
                       iterateProperties(context, res.properties, (key, value, propNode) => {
                         if (propNode && propNode.argument && propNode.argument.type === 'CallExpression') {
-                          const propNodeTypeParams = propNode.argument.typeParameters;
+                          const propNodeTypeParams = propNode.argument.typeArguments
+                            || propNode.argument.typeParameters;
                           if (propNodeTypeParams) {
                             this.visitTSNode(propNodeTypeParams);
                           } else {
@@ -785,8 +786,8 @@ module.exports = function propTypesInstructions(context, components, utils) {
                       });
                       break;
                     case 'CallExpression':
-                      if (res.typeParameters) {
-                        this.visitTSNode(res.typeParameters);
+                      if (res.typeArguments || res.typeParameters) {
+                        this.visitTSNode(res.typeArguments || res.typeParameters);
                       } else {
                         // Ignore this CallExpression return value since it doesn't have any typeParameters to let us know it's types.
                         this.shouldIgnorePropTypes = true;
@@ -963,7 +964,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
         break;
       case 'GenericTypeAnnotation':
         if (propTypes.id.name === '$ReadOnly') {
-          const propTypeParams = propTypes.typeParameters;
+          const propTypeParams = propTypes.typeArguments || propTypes.typeParameters;
           ignorePropsValidation = declarePropTypesForObjectTypeAnnotation(
             propTypeParams.params[0],
             declaredPropTypes
@@ -1004,8 +1005,10 @@ module.exports = function propTypesInstructions(context, components, utils) {
     if (
       node.parent
       && node.parent.callee
-      && node.parent.typeParameters
-      && node.parent.typeParameters.params
+      && (
+        (node.parent.typeArguments && node.parent.typeArguments.params)
+        || (node.parent.typeParameters && node.parent.typeParameters.params)
+      )
       && (
         node.parent.callee.name === 'forwardRef' || (
           node.parent.callee.object
@@ -1015,7 +1018,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
         )
       )
     ) {
-      const propTypesParams = node.parent.typeParameters;
+      const propTypesParams = node.parent.typeArguments || node.parent.typeParameters;
       const declaredPropTypes = {};
       const obj = new DeclarePropTypesForTSTypeAnnotation(propTypesParams.params[1], declaredPropTypes);
       components.set(node, {
@@ -1063,7 +1066,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
       if (
         annotation
         && annotation.type !== 'TSTypeReference'
-        && annotation.typeParameters == null
+        && (annotation.typeArguments == null || annotation.typeParameters == null)
       ) {
         return;
       }