microsoft · weswigham · Apr 4, 2018 · Apr 4, 2018
diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
@@ -16194,7 +16194,7 @@ namespace ts {
             const sourceAttributesType = createJsxAttributesTypeFromAttributesProperty(openingLikeElement, checkMode);
 
             // Check if sourceAttributesType assignable to targetAttributesType though this check will allow excess properties
-            const isSourceAttributeTypeAssignableToTarget = checkTypeAssignableTo(sourceAttributesType, targetAttributesType, openingLikeElement.attributes.properties.length > 0 ? openingLikeElement.attributes : openingLikeElement);
+            const isSourceAttributeTypeAssignableToTarget = isTypeAssignableTo(sourceAttributesType, targetAttributesType);
             // After we check for assignability, we will do another pass to check that all explicitly specified attributes have correct name corresponding in targetAttributeType.
             // This will allow excess properties in spread type as it is very common pattern to spread outer attributes into React component in its render method.
             if (isSourceAttributeTypeAssignableToTarget && !isTypeAny(sourceAttributesType) && !isTypeAny(targetAttributesType)) {
@@ -16211,6 +16211,32 @@ namespace ts {
                     }
                 }
             }
+            else if (!isSourceAttributeTypeAssignableToTarget) {
+                // Assignability failure - check each prop individually, and if that fails, fall back on the bad error span
+                if (length(openingLikeElement.attributes.properties)) {
+                    let reportedError = false;
+                    for (const prop of openingLikeElement.attributes.properties) {
+                        if (isJsxSpreadAttribute(prop)) continue;
+                        const name = idText(prop.name);
+                        const sourcePropType = getIndexedAccessType(sourceAttributesType, getLiteralType(name));
+                        const targetPropType = getIndexedAccessType(targetAttributesType, getLiteralType(name));
+                        const rootChain = () => chainDiagnosticMessages(
+                            /*details*/ undefined,
+                            Diagnostics.Types_of_property_0_are_incompatible,
+                            name,
+                        );
+                        if (!checkTypeAssignableTo(sourcePropType, targetPropType, prop, /*headMessage*/ undefined, rootChain)) {
+                            reportedError = true;
+                        }
+                    }
+
+                    if (reportedError) {
+                        return;
+                    }
+                }
+                // Report fallback error on just the component name
+                checkTypeAssignableTo(sourceAttributesType, targetAttributesType, openingLikeElement.tagName);
+            }
         }
 
         function checkJsxExpression(node: JsxExpression, checkMode?: CheckMode) {

diff --git a/tests/baselines/reference/checkJsxChildrenProperty14.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty14.errors.txt
@@ -1,4 +1,4 @@
-tests/cases/conformance/jsx/file.tsx(42,27): error TS2322: Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & SingleChildProp'.
+tests/cases/conformance/jsx/file.tsx(42,11): error TS2322: Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & SingleChildProp'.
   Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'SingleChildProp'.
     Types of property 'children' are incompatible.
       Type 'Element[]' is not assignable to type 'Element'.
@@ -48,7 +48,7 @@ tests/cases/conformance/jsx/file.tsx(42,27): error TS2322: Type '{ children: Ele
 
     // Error
     let k5 = <SingleChildComp a={10} b="hi"><></><Button /><AnotherButton /></SingleChildComp>;
-                              ~~~~~~~~~~~~~
+              ~~~~~~~~~~~~~~~
 !!! error TS2322: Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & SingleChildProp'.
 !!! error TS2322:   Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'SingleChildProp'.
 !!! error TS2322:     Types of property 'children' are incompatible.

diff --git a/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty2.errors.txt
@@ -1,26 +1,26 @@
-tests/cases/conformance/jsx/file.tsx(14,15): error TS2322: Type '{ a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+tests/cases/conformance/jsx/file.tsx(14,10): error TS2322: Type '{ a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ a: number; b: string; }' is not assignable to type 'Prop'.
     Property 'children' is missing in type '{ a: number; b: string; }'.
 tests/cases/conformance/jsx/file.tsx(17,11): error TS2710: 'children' are specified twice. The attribute named 'children' will be overwritten.
-tests/cases/conformance/jsx/file.tsx(31,11): error TS2322: Type '{ children: (Element | ((name: string) => Element))[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+tests/cases/conformance/jsx/file.tsx(31,6): error TS2322: Type '{ children: (Element | ((name: string) => Element))[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ children: (Element | ((name: string) => Element))[]; a: number; b: string; }' is not assignable to type 'Prop'.
     Types of property 'children' are incompatible.
       Type '(Element | ((name: string) => Element))[]' is not assignable to type 'string | Element'.
         Type '(Element | ((name: string) => Element))[]' is not assignable to type 'Element'.
           Property 'type' is missing in type '(Element | ((name: string) => Element))[]'.
-tests/cases/conformance/jsx/file.tsx(37,11): error TS2322: Type '{ children: (number | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+tests/cases/conformance/jsx/file.tsx(37,6): error TS2322: Type '{ children: (number | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ children: (number | Element)[]; a: number; b: string; }' is not assignable to type 'Prop'.
     Types of property 'children' are incompatible.
       Type '(number | Element)[]' is not assignable to type 'string | Element'.
         Type '(number | Element)[]' is not assignable to type 'Element'.
           Property 'type' is missing in type '(number | Element)[]'.
-tests/cases/conformance/jsx/file.tsx(43,11): error TS2322: Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+tests/cases/conformance/jsx/file.tsx(43,6): error TS2322: Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'Prop'.
     Types of property 'children' are incompatible.
       Type '(string | Element)[]' is not assignable to type 'string | Element'.
         Type '(string | Element)[]' is not assignable to type 'Element'.
           Property 'type' is missing in type '(string | Element)[]'.
-tests/cases/conformance/jsx/file.tsx(49,11): error TS2322: Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+tests/cases/conformance/jsx/file.tsx(49,6): error TS2322: Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'Prop'.
     Types of property 'children' are incompatible.
       Type 'Element[]' is not assignable to type 'string | Element'.
@@ -43,7 +43,7 @@ tests/cases/conformance/jsx/file.tsx(49,11): error TS2322: Type '{ children: Ele
 
     // Error: missing children
     let k = <Comp a={10} b="hi" />;
-                  ~~~~~~~~~~~~~
+             ~~~~
 !!! error TS2322: Type '{ a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
 !!! error TS2322:   Type '{ a: number; b: string; }' is not assignable to type 'Prop'.
 !!! error TS2322:     Property 'children' is missing in type '{ a: number; b: string; }'.
@@ -66,7 +66,7 @@ tests/cases/conformance/jsx/file.tsx(49,11): error TS2322: Type '{ children: Ele
     // Error: incorrect type
     let k2 =
         <Comp a={10} b="hi">
-              ~~~~~~~~~~~~~
+         ~~~~
 !!! error TS2322: Type '{ children: (Element | ((name: string) => Element))[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
 !!! error TS2322:   Type '{ children: (Element | ((name: string) => Element))[]; a: number; b: string; }' is not assignable to type 'Prop'.
 !!! error TS2322:     Types of property 'children' are incompatible.
@@ -79,7 +79,7 @@ tests/cases/conformance/jsx/file.tsx(49,11): error TS2322: Type '{ children: Ele
 
     let k3 =
         <Comp a={10} b="hi">
-              ~~~~~~~~~~~~~
+         ~~~~
 !!! error TS2322: Type '{ children: (number | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
 !!! error TS2322:   Type '{ children: (number | Element)[]; a: number; b: string; }' is not assignable to type 'Prop'.
 !!! error TS2322:     Types of property 'children' are incompatible.
@@ -92,7 +92,7 @@ tests/cases/conformance/jsx/file.tsx(49,11): error TS2322: Type '{ children: Ele
 
     let k4 =
         <Comp a={10} b="hi" >
-              ~~~~~~~~~~~~~
+         ~~~~
 !!! error TS2322: Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
 !!! error TS2322:   Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'Prop'.
 !!! error TS2322:     Types of property 'children' are incompatible.
@@ -105,7 +105,7 @@ tests/cases/conformance/jsx/file.tsx(49,11): error TS2322: Type '{ children: Ele
 
     let k5 =
         <Comp a={10} b="hi" >
-              ~~~~~~~~~~~~~
+         ~~~~
 !!! error TS2322: Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
 !!! error TS2322:   Type '{ children: Element[]; a: number; b: string; }' is not assignable to type 'Prop'.
 !!! error TS2322:     Types of property 'children' are incompatible.

diff --git a/tests/baselines/reference/checkJsxChildrenProperty4.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty4.errors.txt
@@ -1,5 +1,5 @@
 tests/cases/conformance/jsx/file.tsx(24,28): error TS2551: Property 'NAme' does not exist on type 'IUser'. Did you mean 'Name'?
-tests/cases/conformance/jsx/file.tsx(32,9): error TS2322: Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<FetchUser> & IFetchUserProps & { children?: ReactNode; }'.
+tests/cases/conformance/jsx/file.tsx(32,10): error TS2322: Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<FetchUser> & IFetchUserProps & { children?: ReactNode; }'.
   Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IFetchUserProps'.
     Types of property 'children' are incompatible.
       Type '((user: IUser) => Element)[]' is not assignable to type '(user: IUser) => Element'.
@@ -41,7 +41,7 @@ tests/cases/conformance/jsx/file.tsx(32,9): error TS2322: Type '{ children: ((us
     function UserName1() {
         return (
             <FetchUser>
-            ~~~~~~~~~~~
+             ~~~~~~~~~
 !!! error TS2322: Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<FetchUser> & IFetchUserProps & { children?: ReactNode; }'.
 !!! error TS2322:   Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IFetchUserProps'.
 !!! error TS2322:     Types of property 'children' are incompatible.

diff --git a/tests/baselines/reference/checkJsxChildrenProperty5.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty5.errors.txt
@@ -1,12 +1,12 @@
-tests/cases/conformance/jsx/file.tsx(20,15): error TS2322: Type '{ a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+tests/cases/conformance/jsx/file.tsx(20,10): error TS2322: Type '{ a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ a: number; b: string; }' is not assignable to type 'Prop'.
     Property 'children' is missing in type '{ a: number; b: string; }'.
-tests/cases/conformance/jsx/file.tsx(24,11): error TS2322: Type '{ children: Element; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+tests/cases/conformance/jsx/file.tsx(24,6): error TS2322: Type '{ children: Element; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ children: Element; a: number; b: string; }' is not assignable to type 'Prop'.
     Types of property 'children' are incompatible.
       Type 'Element' is not assignable to type 'Button'.
         Property 'render' is missing in type 'Element'.
-tests/cases/conformance/jsx/file.tsx(28,11): error TS2322: Type '{ children: typeof Button; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+tests/cases/conformance/jsx/file.tsx(28,6): error TS2322: Type '{ children: typeof Button; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ children: typeof Button; a: number; b: string; }' is not assignable to type 'Prop'.
     Types of property 'children' are incompatible.
       Type 'typeof Button' is not assignable to type 'Button'.
@@ -34,15 +34,15 @@ tests/cases/conformance/jsx/file.tsx(28,11): error TS2322: Type '{ children: typ
 
     // Error: no children specified
     let k = <Comp a={10} b="hi" />;
-                  ~~~~~~~~~~~~~
+             ~~~~
 !!! error TS2322: Type '{ a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
 !!! error TS2322:   Type '{ a: number; b: string; }' is not assignable to type 'Prop'.
 !!! error TS2322:     Property 'children' is missing in type '{ a: number; b: string; }'.
 
     // Error: JSX.element is not the same as JSX.ElementClass
     let k1 =
         <Comp a={10} b="hi">
-              ~~~~~~~~~~~~~
+         ~~~~
 !!! error TS2322: Type '{ children: Element; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
 !!! error TS2322:   Type '{ children: Element; a: number; b: string; }' is not assignable to type 'Prop'.
 !!! error TS2322:     Types of property 'children' are incompatible.
@@ -52,7 +52,7 @@ tests/cases/conformance/jsx/file.tsx(28,11): error TS2322: Type '{ children: typ
         </Comp>;
     let k2 =
         <Comp a={10} b="hi">
-              ~~~~~~~~~~~~~
+         ~~~~
 !!! error TS2322: Type '{ children: typeof Button; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
 !!! error TS2322:   Type '{ children: typeof Button; a: number; b: string; }' is not assignable to type 'Prop'.
 !!! error TS2322:     Types of property 'children' are incompatible.

diff --git a/tests/baselines/reference/checkJsxChildrenProperty7.errors.txt b/tests/baselines/reference/checkJsxChildrenProperty7.errors.txt
@@ -1,16 +1,16 @@
-tests/cases/conformance/jsx/file.tsx(24,16): error TS2322: Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+tests/cases/conformance/jsx/file.tsx(24,11): error TS2322: Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'Prop'.
     Types of property 'children' are incompatible.
       Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
         Type '(string | Element)[]' is not assignable to type 'Element[]'.
           Type 'string | Element' is not assignable to type 'Element'.
             Type 'string' is not assignable to type 'Element'.
-tests/cases/conformance/jsx/file.tsx(25,16): error TS2322: Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+tests/cases/conformance/jsx/file.tsx(25,11): error TS2322: Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'Prop'.
     Types of property 'children' are incompatible.
       Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
         Type '(string | Element)[]' is not assignable to type 'Element[]'.
-tests/cases/conformance/jsx/file.tsx(27,16): error TS2322: Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
+tests/cases/conformance/jsx/file.tsx(27,11): error TS2322: Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
   Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'Prop'.
     Types of property 'children' are incompatible.
       Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
@@ -42,7 +42,7 @@ tests/cases/conformance/jsx/file.tsx(27,16): error TS2322: Type '{ children: (st
 
     // Error: whitespaces matters
     let k1 = <Comp a={10} b="hi"><Button />  <AnotherButton /></Comp>;
-                   ~~~~~~~~~~~~~
+              ~~~~
 !!! error TS2322: Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
 !!! error TS2322:   Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'Prop'.
 !!! error TS2322:     Types of property 'children' are incompatible.
@@ -51,15 +51,15 @@ tests/cases/conformance/jsx/file.tsx(27,16): error TS2322: Type '{ children: (st
 !!! error TS2322:           Type 'string | Element' is not assignable to type 'Element'.
 !!! error TS2322:             Type 'string' is not assignable to type 'Element'.
     let k2 = <Comp a={10} b="hi"><Button />
-                   ~~~~~~~~~~~~~
+              ~~~~
 !!! error TS2322: Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
 !!! error TS2322:   Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'Prop'.
 !!! error TS2322:     Types of property 'children' are incompatible.
 !!! error TS2322:       Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
 !!! error TS2322:         Type '(string | Element)[]' is not assignable to type 'Element[]'.
         <AnotherButton />  </Comp>;
     let k3 = <Comp a={10} b="hi">    <Button />
-                   ~~~~~~~~~~~~~
+              ~~~~
 !!! error TS2322: Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'IntrinsicAttributes & Prop'.
 !!! error TS2322:   Type '{ children: (string | Element)[]; a: number; b: string; }' is not assignable to type 'Prop'.
 !!! error TS2322:     Types of property 'children' are incompatible.