fix: use type args prop type util

Author: HenryBrown0

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 nodeType = node.typeArguments || node.typeParameters;
+        if (shouldTraverseTypeParams && nodeType && nodeType.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 = nodeType.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 nodeType = node.typeArguments || node.typeParameters;
+      if (nodeType) {
+        if (nodeType.params.length === 1) {
+          let returnType = nodeType.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 propNodeType = propNode.argument.typeArguments || propNode.argument.typeParameters;
+                          if (propNodeType) {
+                            this.visitTSNode(propNodeType);
                           } else {
                             // Ignore this CallExpression return value since it doesn't have any typeParameters to let us know it's types.
                             this.shouldIgnorePropTypes = true;
@@ -782,8 +785,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;
@@ -960,8 +963,9 @@ module.exports = function propTypesInstructions(context, components, utils) {
         break;
       case 'GenericTypeAnnotation':
         if (propTypes.id.name === '$ReadOnly') {
+          const propType = propTypes.typeArguments || propTypes.typeParameters;
           ignorePropsValidation = declarePropTypesForObjectTypeAnnotation(
-            propTypes.typeParameters.params[0],
+            propType.params[0],
             declaredPropTypes
           );
         } else {
@@ -1000,8 +1004,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
@@ -1011,9 +1017,9 @@ module.exports = function propTypesInstructions(context, components, utils) {
         )
       )
     ) {
-      const propTypes = node.parent.typeParameters.params[1];
+      const propTypes = node.parent.typeArguments || node.parent.typeParameters;
       const declaredPropTypes = {};
-      const obj = new DeclarePropTypesForTSTypeAnnotation(propTypes, declaredPropTypes);
+      const obj = new DeclarePropTypesForTSTypeAnnotation(propTypes.params[1], declaredPropTypes);
       components.set(node, {
         declaredPropTypes: obj.declaredPropTypes,
         ignorePropsValidation: obj.shouldIgnorePropTypes,
@@ -1059,7 +1065,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
       if (
         annotation
         && annotation.type !== 'TSTypeReference'
-        && annotation.typeParameters == null
+        && (annotation.typeArguments == null || annotation.typeParameters == null)
       ) {
         return;
       }