Merge pull request #4106 from RyanCavanaugh/allowTsxStringIndexers

Implements #4105 - a string indexer in 'props' disables errors due to surplus attributes

src/compiler/checker.ts

@@ -7273,10 +7273,19 @@ namespace ts {
             else if (elementAttributesType && !isTypeAny(elementAttributesType)) {
                 let correspondingPropSymbol = getPropertyOfType(elementAttributesType, node.name.text);
                 correspondingPropType = correspondingPropSymbol && getTypeOfSymbol(correspondingPropSymbol);
-                // If there's no corresponding property with this name, error
-                if (!correspondingPropType && isUnhyphenatedJsxName(node.name.text)) {
-                    error(node.name, Diagnostics.Property_0_does_not_exist_on_type_1, node.name.text, typeToString(elementAttributesType));
-                    return unknownType;
+                if (isUnhyphenatedJsxName(node.name.text)) {
+                    // Maybe there's a string indexer?
+                    let indexerType = getIndexTypeOfType(elementAttributesType, IndexKind.String);
+                    if (indexerType) {
+                        correspondingPropType = indexerType
+                    }
+                    else {
+                        // If there's no corresponding property with this name, error
+                        if (!correspondingPropType) {
+                            error(node.name, Diagnostics.Property_0_does_not_exist_on_type_1, node.name.text, typeToString(elementAttributesType));
+                            return unknownType;
+                        }
+                    }
                 }
             }
 

tests/baselines/reference/tsxAttributeResolution10.errors.txt

@@ -0,0 +1,35 @@
+tests/cases/conformance/jsx/file.tsx(11,14): error TS2322: Type 'string' is not assignable to type 'boolean'.
+
+
+==== tests/cases/conformance/jsx/react.d.ts (0 errors) ====
+
+    declare module JSX {
+    	interface Element { }
+    	interface IntrinsicElements {
+    	}
+    	interface ElementAttributesProperty {
+    		props;
+    	}
+    }
+
+==== tests/cases/conformance/jsx/file.tsx (1 errors) ====
+    export class MyComponent {  
+      render() {
+      }
+
+      props: {
+      	[s: string]: boolean;
+      }
+    }
+
+    // Should be an error
+    <MyComponent bar='world' />;
+                 ~~~~~~~~~~~
+!!! error TS2322: Type 'string' is not assignable to type 'boolean'.
+
+    // Should be OK
+    <MyComponent bar={true} />;
+
+    // Should be ok
+    <MyComponent data-bar='hello' />;
+

tests/baselines/reference/tsxAttributeResolution10.js

@@ -0,0 +1,50 @@
+//// [tests/cases/conformance/jsx/tsxAttributeResolution10.tsx] ////
+
+//// [react.d.ts]
+
+declare module JSX {
+	interface Element { }
+	interface IntrinsicElements {
+	}
+	interface ElementAttributesProperty {
+		props;
+	}
+}
+
+//// [file.tsx]
+export class MyComponent {  
+  render() {
+  }
+
+  props: {
+  	[s: string]: boolean;
+  }
+}
+
+// Should be an error
+<MyComponent bar='world' />;
+
+// Should be OK
+<MyComponent bar={true} />;
+
+// Should be ok
+<MyComponent data-bar='hello' />;
+
+
+//// [file.jsx]
+define(["require", "exports"], function (require, exports) {
+    var MyComponent = (function () {
+        function MyComponent() {
+        }
+        MyComponent.prototype.render = function () {
+        };
+        return MyComponent;
+    })();
+    exports.MyComponent = MyComponent;
+    // Should be an error
+    <MyComponent bar='world'/>;
+    // Should be OK
+    <MyComponent bar={true}/>;
+    // Should be ok
+    <MyComponent data-bar='hello'/>;
+});

tests/cases/conformance/jsx/tsxAttributeResolution10.tsx

@@ -0,0 +1,31 @@
+//@jsx: preserve
+//@module: amd
+
+//@filename: react.d.ts
+declare module JSX {
+	interface Element { }
+	interface IntrinsicElements {
+	}
+	interface ElementAttributesProperty {
+		props;
+	}
+}
+
+//@filename: file.tsx
+export class MyComponent {  
+  render() {
+  }
+
+  props: {
+  	[s: string]: boolean;
+  }
+}
+
+// Should be an error
+<MyComponent bar='world' />;
+
+// Should be OK
+<MyComponent bar={true} />;
+
+// Should be ok
+<MyComponent data-bar='hello' />;