Support typescript 3 style DefaultProps

src/__tests__/data/StatelessWithDefaultPropsTypescript3.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+export enum enumSample {
+  HELLO = 'hi',
+  BYE = 'bye'
+}
+
+/** StatelessWithDefaultProps props */
+export interface StatelessWithDefaultPropsProps {
+  /**
+   * sample with default value
+   * @default hello
+   */
+  sampleDefaultFromJSDoc: 'hello' | 'goodbye';
+  /** sampleTrue description */
+  sampleTrue: boolean;
+  /** sampleFalse description */
+  sampleFalse: boolean;
+  /** sampleEnum description */
+  sampleEnum: enumSample;
+  /** sampleString description */
+  sampleString: string;
+  /** sampleObject description */
+  sampleObject: { [key: string]: any };
+  /** sampleNull description */
+  sampleNull: null;
+  /** sampleUndefined description */
+  sampleUndefined: any;
+  /** sampleNumber description */
+  sampleNumber: number;
+}
+
+/** StatelessWithDefaultProps description */
+export const StatelessWithDefaultProps: React.StatelessComponent<
+  StatelessWithDefaultPropsProps
+> = props => <div>test</div>;
+
+StatelessWithDefaultProps.defaultProps = {
+  sampleEnum: enumSample.HELLO,
+  sampleFalse: false,
+  sampleNull: null,
+  sampleNumber: -1,
+  // prettier-ignore
+  sampleObject: { a: '1', b: 2, c: true, d: false, e: undefined, f: null, g: { a: '1' } },
+  sampleString: 'hello',
+  sampleTrue: true,
+  sampleUndefined: undefined
+};

src/__tests__/parser.ts

@@ -442,7 +442,7 @@ describe('parser', () => {
           regularProp: {
             defaultValue: 'foo',
             description: 'regularProp description',
-            required: true,
+            required: false,
             type: 'string'
           },
           shorthandProp: {
@@ -462,6 +462,10 @@ describe('parser', () => {
     it('supports destructuring for arrow functions', () => {
       check('StatelessWithDestructuredPropsArrow', expectation);
     });
+
+    it('supports typescript 3.0 style defaulted props', () => {
+      check('StatelessWithDefaultPropsTypescript3', expectation);
+    });
   });
 
   it('should parse functional component component defined as function', () => {

src/parser.ts

@@ -135,9 +135,7 @@ export function withCustomConfig(
   );
 
   if (error !== undefined) {
-    const errorText = `Cannot load custom tsconfig.json from provided path: ${tsconfigPath}, with error code: ${
-      error.code
-    }, message: ${error.messageText}`;
+    const errorText = `Cannot load custom tsconfig.json from provided path: ${tsconfigPath}, with error code: ${error.code}, message: ${error.messageText}`;
     throw new Error(errorText);
   }
 
@@ -508,10 +506,11 @@ export class Parser {
       const isOptional = (prop.getFlags() & ts.SymbolFlags.Optional) !== 0;
 
       const jsDocComment = this.findDocComment(prop);
+      const hasCodeBasedDefault = defaultProps[propName] !== undefined;
 
       let defaultValue = null;
 
-      if (defaultProps[propName] !== undefined) {
+      if (hasCodeBasedDefault) {
         defaultValue = { value: defaultProps[propName] };
       } else if (jsDocComment.tags.default) {
         defaultValue = { value: jsDocComment.tags.default };
@@ -524,7 +523,7 @@ export class Parser {
         description: jsDocComment.fullComment,
         name: propName,
         parent,
-        required: !isOptional,
+        required: !isOptional && !hasCodeBasedDefault,
         type: this.getDocgenType(propType)
       };
     });