fix: Add support for TSAsExpressions when trying to stringify expressions (#634)

Using a combination of forwardRefs and generics leads to wanting to use type assertions to retain the generic nature of the wrapped class.  This plays rather poorly with propTypes.  After a lot of mucking around I decided to simply assert the desired type when setting propTypes and defaults.

 This leads to code like this:

 ```tsx
 (MenuItem as ComponentObjectOf<typeof MenuItem>).propTypes - {...}
 ```

 This change extends expressionTo.toArray to deal with the typescript expression.

Co-authored-by: Daniel Tschinder <[email protected]>

Author: ggascoigne

src/__tests__/__snapshots__/main-test.ts.snap

@@ -1835,6 +1835,44 @@ Object {
 }
 `;
 
+exports[`main fixtures processes component "component_43.tsx" without errors 1`] = `
+Object {
+  "description": "",
+  "displayName": "MenuItem",
+  "methods": Array [],
+  "props": Object {
+    "children": Object {
+      "description": "Menu item contents.",
+      "required": false,
+      "type": Object {
+        "name": "node",
+      },
+    },
+    "classes": Object {
+      "description": "Override or extend the styles applied to the component. See CSS API below for more details.",
+      "required": false,
+      "type": Object {
+        "name": "object",
+      },
+    },
+    "component": Object {
+      "defaultValue": Object {
+        "computed": false,
+        "value": "'li'",
+      },
+      "required": false,
+    },
+    "disableGutters": Object {
+      "defaultValue": Object {
+        "computed": false,
+        "value": "false",
+      },
+      "required": false,
+    },
+  },
+}
+`;
+
 exports[`main fixtures processes component "flow-export-type.js" without errors 1`] = `
 Object {
   "description": "This is a Flow class component",

src/__tests__/fixtures/component_43.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MatMenuItem, {
+    MenuItemProps as MatMenuItemProps,
+} from '@mui/material/MenuItem';
+
+export type ComponentObjectOf<
+    T extends React.ElementType,
+    P = React.ComponentProps<T>
+> = React.FunctionComponent<P>;
+
+export type MenuItemProps<
+    D extends React.ElementType,
+    P = {}
+> = MatMenuItemProps<D, P>;
+
+const MenuItem = React.forwardRef<MenuItemProps<'li'>>(
+    <C extends React.ElementType>(
+        props: MenuItemProps<C, { component?: C }>,
+        ref: React.Ref<any>
+    ) => {
+        return <MatMenuItem {...props} ref={ref} />;
+    }
+) as unknown as <C extends React.ElementType = 'li'>(
+    props: MenuItemProps<C, { component?: C }>
+) => React.ReactElement;
+
+(MenuItem as ComponentObjectOf<typeof MenuItem>).propTypes = {
+    /** Menu item contents. */
+    children: PropTypes.node,
+    /** Override or extend the styles applied to the component. See CSS API below for more details. */
+    classes: PropTypes.object,
+};
+
+(MenuItem as ComponentObjectOf<typeof MenuItem>).defaultProps = {
+    component: 'li',
+    disableGutters: false,
+};
+
+export default MenuItem;

src/utils/__tests__/expressionTo-test.ts

@@ -38,5 +38,17 @@ describe('expressionTo', () => {
         expressionToArray(expression('foo[{ a(){} }].baz'), noopImporter),
       ).toEqual(['foo', '{a: <function>}', 'baz']);
     });
+
+    it('with TSAsExpression', () => {
+      expect(
+        expressionToArray(
+          expression('(baz as X).prop', {
+            filename: 'file.ts',
+            parserOptions: { plugins: ['typescript'] },
+          }),
+          noopImporter,
+        ),
+      ).toEqual(['baz', 'prop']);
+    });
   });
 });

src/utils/expressionTo.ts

@@ -36,6 +36,11 @@ function toArray(path: NodePath, importer: Importer): string[] {
     } else if (t.Identifier.check(node)) {
       result.push(node.name);
       continue;
+    } else if (t.TSAsExpression.check(node)) {
+      if (t.Identifier.check(node.expression)) {
+        result.push(node.expression.name);
+      }
+      continue;
     } else if (t.Literal.check(node)) {
       // @ts-ignore
       result.push(node.raw);