fix: Correctly detect index access types in typescript (#400)

Co-authored-by: Daniel Tschinder <[email protected]>
# Conflicts:
#	src/__tests__/__snapshots__/main-test.js.snap
#	src/utils/__tests__/getTSType-test.js

Author: bryceosterhaus

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

@@ -1577,3 +1577,21 @@ Object {
   },
 }
 `;
+
+exports[`main fixtures processes component "component_41.tsx" without errors 1`] = `
+Object {
+  "description": "",
+  "displayName": "MyComponent",
+  "methods": Array [],
+  "props": Object {
+    "value": Object {
+      "description": "String value of a number",
+      "required": false,
+      "tsType": Object {
+        "name": "STRING_VALS[number]",
+        "raw": "typeof STRING_VALS[number]",
+      },
+    },
+  },
+}
+`;

src/__tests__/fixtures/component_41.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+export const STRING_VALS = [
+  'one',
+  'two',
+  'three'
+];
+
+interface IProps {
+  /**
+   * String value of a number
+   */
+  value?: typeof STRING_VALS[number];
+}
+
+const MyComponent = (props: IProps) => {
+  return (
+    <div>
+      {props.value}
+    </div>
+  );
+}
+
+export default MyComponent;

src/utils/__tests__/getTSType-test.js

@@ -377,6 +377,26 @@ describe('getTSType', () => {
     });
   });
 
+  it('resolves indexed access of array', () => {
+    const typePath = statement(`
+      var x: typeof STRING_VALS[number];
+
+      const STRING_VALS = [
+        'one',
+        'two',
+        'three'
+      ];
+    `)
+      .get('declarations', 0)
+      .get('id')
+      .get('typeAnnotation')
+      .get('typeAnnotation');
+    expect(getTSType(typePath)).toEqual({
+      name: 'STRING_VALS[number]',
+      raw: 'typeof STRING_VALS[number]',
+    });
+  });
+
   it('resolves types in scope', () => {
     const typePath = statement(`
       var x: MyType = 2;

src/utils/getTSType.js

@@ -365,12 +365,14 @@ function handleTSIndexedAccessType(
   // We only get the signature if the objectType is a type (vs interface)
   if (!objectType.signature)
     return {
-      name: `${objectType.name}[${indexType.value.toString()}]`,
+      name: `${objectType.name}[${
+        indexType.value ? indexType.value.toString() : indexType.name
+      }]`,
       raw: printValue(path),
     };
   const resolvedType = objectType.signature.properties.find(p => {
     // indexType.value = "'foo'"
-    return p.key === indexType.value.replace(/['"]+/g, '');
+    return indexType.value && p.key === indexType.value.replace(/['"]+/g, '');
   });
   if (!resolvedType) {
     return { name: 'unknown' };