Process TypeScript annotations

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

@@ -1048,3 +1048,131 @@ Object {
   },
 }
 `;
+
+exports[`main fixtures processes component "component_21.tsx" without errors 1`] = `
+Object {
+  "description": "This is a typescript class component",
+  "displayName": "TSComponent",
+  "methods": Array [],
+  "props": Object {
+    "bar": Object {
+      "description": "Required prop",
+      "flowType": Object {
+        "name": "number",
+      },
+      "required": true,
+    },
+    "baz": Object {
+      "description": "Complex union prop",
+      "flowType": Object {
+        "elements": Array [
+          Object {
+            "name": "number",
+          },
+          Object {
+            "name": "signature",
+            "raw": "{ enter?: number, exit?: number }",
+            "signature": Object {
+              "properties": Array [
+                Object {
+                  "key": "enter",
+                  "value": Object {
+                    "name": "number",
+                    "required": false,
+                  },
+                },
+                Object {
+                  "key": "exit",
+                  "value": Object {
+                    "name": "number",
+                    "required": false,
+                  },
+                },
+              ],
+            },
+            "type": "object",
+          },
+          Object {
+            "name": "literal",
+            "value": "'auto'",
+          },
+        ],
+        "name": "union",
+        "raw": "number | { enter?: number, exit?: number } | 'auto'",
+      },
+      "required": true,
+    },
+    "foo": Object {
+      "description": "Optional prop",
+      "flowType": Object {
+        "name": "string",
+      },
+      "required": false,
+    },
+  },
+}
+`;
+
+exports[`main fixtures processes component "component_22.tsx" without errors 1`] = `
+Object {
+  "description": "This is a TypeScript function component",
+  "displayName": "TSFunctionComponent",
+  "methods": Array [],
+  "props": Object {
+    "align": Object {
+      "description": "",
+      "flowType": Object {
+        "elements": Array [
+          Object {
+            "name": "literal",
+            "value": "\\"left\\"",
+          },
+          Object {
+            "name": "literal",
+            "value": "\\"center\\"",
+          },
+          Object {
+            "name": "literal",
+            "value": "\\"right\\"",
+          },
+          Object {
+            "name": "literal",
+            "value": "\\"justify\\"",
+          },
+        ],
+        "name": "union",
+        "raw": "\\"left\\" | \\"center\\" | \\"right\\" | \\"justify\\"",
+      },
+      "required": false,
+    },
+    "center": Object {
+      "description": "",
+      "flowType": Object {
+        "name": "boolean",
+      },
+      "required": false,
+    },
+    "justify": Object {
+      "description": "",
+      "flowType": Object {
+        "name": "boolean",
+      },
+      "required": false,
+    },
+    "left": Object {
+      "description": "",
+      "flowType": Object {
+        "name": "boolean",
+      },
+      "required": false,
+    },
+    "right": Object {
+      "description": "",
+      "flowType": Object {
+        "name": "boolean",
+      },
+      "required": false,
+    },
+  },
+}
+`;

src/__tests__/fixtures/component_21.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React, { Component } from 'react';
+
+type BaseProps = {
+  /** Optional prop */
+  foo?: string,
+  /** Required prop */
+  bar: number
+};
+
+type TransitionDuration = number | { enter?: number, exit?: number } | 'auto';
+
+type Props = BaseProps & {
+  /** Complex union prop */
+  baz: TransitionDuration
+}
+
+/**
+ * This is a typescript class component
+ */
+export default class TSComponent extends Component<Props> {
+  render() {
+    return <h1>Hello world</h1>;
+  }
+}

src/__tests__/fixtures/component_22.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+type Props = {
+  align?: "left" | "center" | "right" | "justify",
+  left?: boolean,
+  center?: boolean,
+  right?: boolean,
+  justify?: boolean,
+};
+
+/**
+ * This is a TypeScript function component
+ */
+export function TSFunctionComponent(props: Props) {
+  return <h1>Hello world</h1>;
+}

src/__tests__/main-test.js

@@ -225,12 +225,16 @@ describe('main', () => {
     const fixturePath = path.join(__dirname, 'fixtures');
     const fileNames = fs.readdirSync(fixturePath);
     for (let i = 0; i < fileNames.length; i++) {
-      const fileContent = fs.readFileSync(path.join(fixturePath, fileNames[i]));
+      const filePath = path.join(fixturePath, fileNames[i]);
+      const fileContent = fs.readFileSync(filePath);
 
       it(`processes component "${fileNames[i]}" without errors`, () => {
         let result;
         expect(() => {
-          result = docgen.parse(fileContent);
+          result = docgen.parse(fileContent, null, null, {
+            filename: filePath,
+            babelrc: false,
+          });
         }).not.toThrowError();
         expect(result).toMatchSnapshot();
       });

src/handlers/flowTypeHandler.js

@@ -11,6 +11,7 @@ import recast from 'recast';
 import type Documentation from '../Documentation';
 
 import getFlowType from '../utils/getFlowType';
+import getTSType from '../utils/getTSType';
 import getPropertyName from '../utils/getPropertyName';
 import getFlowTypeFromReactComponent, {
   applyToFlowTypeProperties,
@@ -53,6 +54,20 @@ function setPropDescriptor(documentation: Documentation, path: NodePath): void {
     propDescriptor.required = !path.node.optional;
     propDescriptor.flowType = type;
 
+    // We are doing this here instead of in a different handler
+    // to not need to duplicate the logic for checking for
+    // imported types that are spread in to props.
+    setPropDescription(documentation, path);
+  } else if (types.TSPropertySignature.check(path.node)) {
+    const type = getTSType(path.get('typeAnnotation'));
+
+    const propName = getPropertyName(path);
+    if (!propName) return;
+
+    const propDescriptor = documentation.getPropDescriptor(propName);
+    propDescriptor.required = !path.node.optional;
+    propDescriptor.flowType = type;
+
     // We are doing this here instead of in a different handler
     // to not need to duplicate the logic for checking for
     // imported types that are spread in to props.