Fix 10625: JSX Not validating when index signature is present (#10352)

* Check for type of property declaration before using index signature

* Add tests and baselines

* fix linting error

Author: yuit

src/compiler/checker.ts

@@ -10140,10 +10140,9 @@ namespace ts {
                 const correspondingPropSymbol = getPropertyOfType(elementAttributesType, node.name.text);
                 correspondingPropType = correspondingPropSymbol && getTypeOfSymbol(correspondingPropSymbol);
                 if (isUnhyphenatedJsxName(node.name.text)) {
-                    // Maybe there's a string indexer?
-                    const indexerType = getIndexTypeOfType(elementAttributesType, IndexKind.String);
-                    if (indexerType) {
-                        correspondingPropType = indexerType;
+                    const attributeType = getTypeOfPropertyOfType(elementAttributesType, getTextOfPropertyName(node.name)) || getIndexTypeOfType(elementAttributesType, IndexKind.String);
+                    if (attributeType) {
+                        correspondingPropType = attributeType;
                     }
                     else {
                         // If there's no corresponding property with this name, error

tests/baselines/reference/tsxAttributeResolution14.errors.txt

@@ -0,0 +1,38 @@
+tests/cases/conformance/jsx/file.tsx(14,28): error TS2322: Type 'number' is not assignable to type 'string'.
+tests/cases/conformance/jsx/file.tsx(16,28): error TS2322: Type 'boolean' is not assignable to type 'string | number'.
+
+
+==== tests/cases/conformance/jsx/react.d.ts (0 errors) ====
+    
+    declare module JSX {
+    	interface Element { }
+    	interface IntrinsicElements {
+            div: any;
+    	}
+        interface ElementAttributesProperty { prop: any }
+    }
+    
+==== tests/cases/conformance/jsx/file.tsx (2 errors) ====
+    
+    interface IProps {
+      primaryText: string,
+      [propName: string]: string | number
+    }
+    
+    function VerticalNavMenuItem(prop: IProps) {
+      return <div>props.primaryText</div>
+    }
+    
+    function VerticalNav() {
+      return (
+        <div>
+          <VerticalNavMenuItem primaryText={2} />  // error
+                               ~~~~~~~~~~~~~~~
+!!! error TS2322: Type 'number' is not assignable to type 'string'.
+          <VerticalNavMenuItem justRandomProp={2} primaryText={"hello"} />  // ok
+          <VerticalNavMenuItem justRandomProp1={true} primaryText={"hello"} />  // error
+                               ~~~~~~~~~~~~~~~~~~~~~~
+!!! error TS2322: Type 'boolean' is not assignable to type 'string | number'.
+        </div>
+      )
+    } 

tests/baselines/reference/tsxAttributeResolution14.js

@@ -0,0 +1,47 @@
+//// [tests/cases/conformance/jsx/tsxAttributeResolution14.tsx] ////
+
+//// [react.d.ts]
+
+declare module JSX {
+	interface Element { }
+	interface IntrinsicElements {
+        div: any;
+	}
+    interface ElementAttributesProperty { prop: any }
+}
+
+//// [file.tsx]
+
+interface IProps {
+  primaryText: string,
+  [propName: string]: string | number
+}
+
+function VerticalNavMenuItem(prop: IProps) {
+  return <div>props.primaryText</div>
+}
+
+function VerticalNav() {
+  return (
+    <div>
+      <VerticalNavMenuItem primaryText={2} />  // error
+      <VerticalNavMenuItem justRandomProp={2} primaryText={"hello"} />  // ok
+      <VerticalNavMenuItem justRandomProp1={true} primaryText={"hello"} />  // error
+    </div>
+  )
+} 
+
+//// [file.jsx]
+function VerticalNavMenuItem(prop) {
+    return <div>props.primaryText</div>;
+}
+function VerticalNav() {
+    return (<div>
+      <VerticalNavMenuItem primaryText={2}/> // error
+      // error
+      <VerticalNavMenuItem justRandomProp={2} primaryText={"hello"}/> // ok
+      // ok
+      <VerticalNavMenuItem justRandomProp1={true} primaryText={"hello"}/> // error
+      // error
+    </div>);
+}

tests/cases/conformance/jsx/tsxAttributeResolution14.tsx

@@ -0,0 +1,32 @@
+//@jsx: preserve
+//@module: amd
+
+//@filename: react.d.ts
+declare module JSX {
+	interface Element { }
+	interface IntrinsicElements {
+        div: any;
+	}
+    interface ElementAttributesProperty { prop: any }
+}
+
+//@filename: file.tsx
+
+interface IProps {
+  primaryText: string,
+  [propName: string]: string | number
+}
+
+function VerticalNavMenuItem(prop: IProps) {
+  return <div>props.primaryText</div>
+}
+
+function VerticalNav() {
+  return (
+    <div>
+      <VerticalNavMenuItem primaryText={2} />  // error
+      <VerticalNavMenuItem justRandomProp={2} primaryText={"hello"} />  // ok
+      <VerticalNavMenuItem justRandomProp1={true} primaryText={"hello"} />  // error
+    </div>
+  )
+}