Add support for TypeA & { ... }

Author: Joachim Seminck

lib/rules/prop-types.js

@@ -710,6 +710,20 @@ module.exports = {
       });
     }
 
+    function declarePropTypesForObjectTypeAnnotation(propTypes, declaredPropTypes) {
+      let ignorePropsValidation = false;
+
+      iterateProperties(propTypes.properties, (key, value) => {
+        if (!value) {
+          ignorePropsValidation = true;
+          return;
+        }
+        declaredPropTypes[key] = buildTypeAnnotationDeclarationTypes(value);
+      });
+
+      return ignorePropsValidation;
+    }
+
     /**
      * Marks all props found inside IntersectionTypeAnnotation as declared.
      * Since InterSectionTypeAnnotations can be nested, this handles recursively. 
@@ -723,22 +737,26 @@ module.exports = {
       let ignorePropsValidation = false;
 
       propTypes.types.forEach(annotation => {
-        const typeNode = typeScope(annotation.id.name);
-        if (!typeNode) {
-          ignorePropsValidation = true;
-          return;
-        }
-
-        if (typeNode.type === 'IntersectionTypeAnnotation') {
-          ignorePropsValidation = declarePropTypesForIntersectionTypeAnnotation(typeNode, declaredPropTypes);
+        if (annotation.type === 'ObjectTypeAnnotation') {
+          ignorePropsValidation = declarePropTypesForObjectTypeAnnotation(annotation, declaredPropTypes);
         } else {
-          iterateProperties(typeNode.properties, (key, value) => {
-            if (!value) {
-              ignorePropsValidation = true;
-              return;
-            }
-            declaredPropTypes[key] = buildTypeAnnotationDeclarationTypes(value);
-          });
+          const typeNode = typeScope(annotation.id.name);
+          if (!typeNode) {
+            ignorePropsValidation = true;
+            return;
+          }
+
+          if (typeNode.type === 'IntersectionTypeAnnotation') {
+            ignorePropsValidation = declarePropTypesForIntersectionTypeAnnotation(typeNode, declaredPropTypes);
+          } else {
+            iterateProperties(typeNode.properties, (key, value) => {
+              if (!value) {
+                ignorePropsValidation = true;
+                return;
+              }
+              declaredPropTypes[key] = buildTypeAnnotationDeclarationTypes(value);
+            });
+          }
         }
       });
 
@@ -761,13 +779,7 @@ module.exports = {
 
       switch (propTypes && propTypes.type) {
         case 'ObjectTypeAnnotation':
-          iterateProperties(propTypes.properties, (key, value) => {
-            if (!value) {
-              ignorePropsValidation = true;
-              return;
-            }
-            declaredPropTypes[key] = buildTypeAnnotationDeclarationTypes(value);
-          });
+          ignorePropsValidation = declarePropTypesForObjectTypeAnnotation(propTypes, declaredPropTypes);
           break;
         case 'ObjectExpression':
           iterateProperties(propTypes.properties, (key, value) => {

tests/lib/rules/prop-types.js

@@ -1716,6 +1716,23 @@ ruleTester.run('prop-types', rule, {
         }
       `,
       parser: 'babel-eslint'
+    }, {
+      code: `
+        type PropsA = { bar: string };
+        type PropsB = { zap: string };
+        type Props = PropsA & {
+          baz: string 
+        };
+
+        class Bar extends React.Component {
+          props: Props & PropsB;
+          
+          render() {
+            return <div>{this.props.bar} - {this.props.zap} - {this.props.baz}</div>
+          }
+        }
+      `,
+      parser: 'babel-eslint'
     }, {
       code: `
         type Props = { foo: string }
@@ -3426,6 +3443,26 @@ ruleTester.run('prop-types', rule, {
       errors: [{
         message: '\'fooBar\' is missing in props validation'
       }]
+    }, {
+      code: `
+        type PropsB = { bar: string };
+        type PropsC = { zap: string };
+        type Props = PropsB & {
+          baz: string 
+        };
+
+        class Bar extends React.Component {
+          props: Props & PropsC;
+          
+          render() {
+            return <div>{this.props.bar} - {this.props.baz} - {this.props.fooBar}</div>
+          }
+        }
+      `,
+      errors: [{
+        message: '\'fooBar\' is missing in props validation'
+      }],
+      parser: 'babel-eslint'
     }
   ]
 });