Merge pull request microsoft#4106 from RyanCavanaugh/allowTsxStringIndexers

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

Author: RyanCavanaugh

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' />;