Use question mark token for optional props

Author: Mohsen Azimi

README.md

@@ -38,7 +38,7 @@ class MyComponent extends React.Component {
 ```tsx
 type MyComponentProps = {
   prop1: string;
-  prop2: number | undefined;
+  prop2?: number;
 }
 
 type MyComponentState = {

src/transforms/react-js-make-props-and-state-transform.ts

@@ -222,8 +222,21 @@ export function reactJSMakePropsAndStateInterfaceTransformFactoryFactory(typeChe
                             console.warn('Bad value for propType', name, 'at', propertyAssignment.getStart());
                             return result;
                         }
+
+                        // Ignore children, React types have it
+                        if (propertyAssignment.name.getText() === 'children') {
+                            return result;
+                        }
+
                         const typeValue = getTypeFromReactPropTypeExpression(propertyAssignment.initializer);
-                        const propertySignature = ts.createPropertySignature([], name, undefined, typeValue, undefined);
+                        const isOptional = isPropTypeOptional(propertyAssignment.initializer);
+                        const propertySignature = ts.createPropertySignature(
+                            [],
+                            name,
+                            isOptional ? ts.createToken(ts.SyntaxKind.QuestionToken): undefined,
+                            typeValue,
+                            undefined,
+                        );
                         result.members.push(propertySignature)
                         return result;
                 }, ts.createTypeLiteralNode([]));
@@ -280,19 +293,16 @@ export function reactJSMakePropsAndStateInterfaceTransformFactoryFactory(typeChe
                 } else {
                     result = ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword);
                 }
+                return result;
+            }
 
-                if (!/\.isRequired/.test(text)) {
-                    return makeTypeNodeOptional(result);
-                } else {
-                    return result;
-                }
-
-                function makeTypeNodeOptional(node: ts.TypeNode) {
-                    return ts.createUnionOrIntersectionTypeNode(ts.SyntaxKind.UnionType, [
-                        node,
-                        ts.createKeywordTypeNode(ts.SyntaxKind.UndefinedKeyword)
-                    ]);
-                }
+            /**
+             * Decide if node is optional
+             * @param node React propTypes member node
+             */
+            function isPropTypeOptional(node: ts.PropertyAccessExpression) {
+                const text = node.getText().replace(/React\.PropTypes\./, '');
+                return !/\.isRequired/.test(text)
             }
         };
     };

test/react-js-make-props-and-state-transform/static-proptypes-many-props/output.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
 
 export default class MyComponent extends React.Component<{
-        any: any | undefined;
-        array: any[] | undefined;
-        bool: boolean | undefined;
-        func: ((...args: any[]) => any) | undefined;
-        number: number | undefined;
-        object: object | undefined;
-        string: string | undefined;
-        node: (number | string | JSX.Element) | undefined;
-        element: JSX.Element | undefined;
+        any?: any;
+        array?: any[];
+        bool?: boolean;
+        func?: (...args: any[]) => any;
+        number?: number;
+        object?: object;
+        string?: string;
+        node?: number | string | JSX.Element;
+        element?: JSX.Element;
         anyRequired: any;
         arrayRequired: any[];
         boolRequired: boolean;