fix: do not use JSX.ElementChildrenAttribute under jsx: react-jsx or jsx: react-jsxdev

src/compiler/checker.ts

@@ -33466,6 +33466,10 @@ export function createTypeChecker(host: TypeCheckerHost): TypeChecker {
     }
 
     function getJsxElementChildrenPropertyName(jsxNamespace: Symbol): __String | undefined {
+        if (compilerOptions.jsx === JsxEmit.ReactJSX || compilerOptions.jsx === JsxEmit.ReactJSXDev) {
+            // In these JsxEmit modes the children property is fixed to 'children'
+            return "children" as __String;
+        }
         return getNameFromJsxElementAttributesContainer(JsxNames.ElementChildrenAttributeNameContainer, jsxNamespace);
     }
 

tests/baselines/reference/jsxNamespaceElementChildrenAttributeIgnoredWhenReactJsx(jsx=react-jsx).errors.txt

@@ -0,0 +1,33 @@
+/test.tsx(7,2): error TS2741: Property 'offspring' is missing in type '{ children: string; }' but required in type '{ offspring: string; }'.
+
+
+==== /jsx.d.ts (0 errors) ====
+    declare namespace JSX {
+      interface IntrinsicElements {
+        h1: { children: string }
+      }
+
+      type Element = string;
+
+      interface ElementChildrenAttribute {
+        offspring: any;
+      }
+    }
+
+==== /test.tsx (1 errors) ====
+    const Title = (props: { children: string }) => <h1>{props.children}</h1>;
+
+    <Title>Hello, world!</Title>;
+
+    const Wrong = (props: { offspring: string }) => <h1>{props.offspring}</h1>;
+
+    <Wrong>Byebye, world!</Wrong>
+     ~~~~~
+!!! error TS2741: Property 'offspring' is missing in type '{ children: string; }' but required in type '{ offspring: string; }'.
+!!! related TS2728 /test.tsx:5:25: 'offspring' is declared here.
+
+==== /jsx/jsx-runtime.ts (0 errors) ====
+    export {};
+==== /jsx/jsx-dev-runtime.ts (0 errors) ====
+    export {};
+

tests/baselines/reference/jsxNamespaceElementChildrenAttributeIgnoredWhenReactJsx(jsx=react-jsx).js

@@ -0,0 +1,44 @@
+//// [tests/cases/compiler/jsxNamespaceElementChildrenAttributeIgnoredWhenReactJsx.tsx] ////
+
+//// [jsx.d.ts]
+declare namespace JSX {
+  interface IntrinsicElements {
+    h1: { children: string }
+  }
+
+  type Element = string;
+
+  interface ElementChildrenAttribute {
+    offspring: any;
+  }
+}
+
+//// [test.tsx]
+const Title = (props: { children: string }) => <h1>{props.children}</h1>;
+
+<Title>Hello, world!</Title>;
+
+const Wrong = (props: { offspring: string }) => <h1>{props.offspring}</h1>;
+
+<Wrong>Byebye, world!</Wrong>
+
+//// [jsx-runtime.ts]
+export {};
+//// [jsx-dev-runtime.ts]
+export {};
+
+
+//// [jsx-runtime.js]
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//// [test.js]
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("/jsx/jsx-runtime");
+var Title = function (props) { return (0, jsx_runtime_1.jsx)("h1", { children: props.children }); };
+(0, jsx_runtime_1.jsx)(Title, { children: "Hello, world!" });
+var Wrong = function (props) { return (0, jsx_runtime_1.jsx)("h1", { children: props.offspring }); };
+(0, jsx_runtime_1.jsx)(Wrong, { children: "Byebye, world!" });
+//// [jsx-dev-runtime.js]
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

tests/baselines/reference/jsxNamespaceElementChildrenAttributeIgnoredWhenReactJsx(jsx=react-jsx).symbols

@@ -0,0 +1,61 @@
+//// [tests/cases/compiler/jsxNamespaceElementChildrenAttributeIgnoredWhenReactJsx.tsx] ////
+
+=== /jsx.d.ts ===
+declare namespace JSX {
+>JSX : Symbol(JSX, Decl(jsx.d.ts, 0, 0))
+
+  interface IntrinsicElements {
+>IntrinsicElements : Symbol(IntrinsicElements, Decl(jsx.d.ts, 0, 23))
+
+    h1: { children: string }
+>h1 : Symbol(IntrinsicElements.h1, Decl(jsx.d.ts, 1, 31))
+>children : Symbol(children, Decl(jsx.d.ts, 2, 9))
+  }
+
+  type Element = string;
+>Element : Symbol(Element, Decl(jsx.d.ts, 3, 3))
+
+  interface ElementChildrenAttribute {
+>ElementChildrenAttribute : Symbol(ElementChildrenAttribute, Decl(jsx.d.ts, 5, 24))
+
+    offspring: any;
+>offspring : Symbol(ElementChildrenAttribute.offspring, Decl(jsx.d.ts, 7, 38))
+  }
+}
+
+=== /test.tsx ===
+const Title = (props: { children: string }) => <h1>{props.children}</h1>;
+>Title : Symbol(Title, Decl(test.tsx, 0, 5))
+>props : Symbol(props, Decl(test.tsx, 0, 15))
+>children : Symbol(children, Decl(test.tsx, 0, 23))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(jsx.d.ts, 1, 31))
+>props.children : Symbol(children, Decl(test.tsx, 0, 23))
+>props : Symbol(props, Decl(test.tsx, 0, 15))
+>children : Symbol(children, Decl(test.tsx, 0, 23))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(jsx.d.ts, 1, 31))
+
+<Title>Hello, world!</Title>;
+>Title : Symbol(Title, Decl(test.tsx, 0, 5))
+>Title : Symbol(Title, Decl(test.tsx, 0, 5))
+
+const Wrong = (props: { offspring: string }) => <h1>{props.offspring}</h1>;
+>Wrong : Symbol(Wrong, Decl(test.tsx, 4, 5))
+>props : Symbol(props, Decl(test.tsx, 4, 15))
+>offspring : Symbol(offspring, Decl(test.tsx, 4, 23))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(jsx.d.ts, 1, 31))
+>props.offspring : Symbol(offspring, Decl(test.tsx, 4, 23))
+>props : Symbol(props, Decl(test.tsx, 4, 15))
+>offspring : Symbol(offspring, Decl(test.tsx, 4, 23))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(jsx.d.ts, 1, 31))
+
+<Wrong>Byebye, world!</Wrong>
+>Wrong : Symbol(Wrong, Decl(test.tsx, 4, 5))
+>Wrong : Symbol(Wrong, Decl(test.tsx, 4, 5))
+
+=== /jsx/jsx-runtime.ts ===
+
+export {};
+=== /jsx/jsx-dev-runtime.ts ===
+
+export {};
+

tests/baselines/reference/jsxNamespaceElementChildrenAttributeIgnoredWhenReactJsx(jsx=react-jsx).types

@@ -0,0 +1,91 @@
+//// [tests/cases/compiler/jsxNamespaceElementChildrenAttributeIgnoredWhenReactJsx.tsx] ////
+
+=== /jsx.d.ts ===
+declare namespace JSX {
+  interface IntrinsicElements {
+    h1: { children: string }
+>h1 : { children: string; }
+>   : ^^^^^^^^^^^^      ^^^
+>children : string
+>         : ^^^^^^
+  }
+
+  type Element = string;
+>Element : string
+>        : ^^^^^^
+
+  interface ElementChildrenAttribute {
+    offspring: any;
+>offspring : any
+>          : ^^^
+  }
+}
+
+=== /test.tsx ===
+const Title = (props: { children: string }) => <h1>{props.children}</h1>;
+>Title : (props: { children: string; }) => string
+>      : ^     ^^                     ^^^^^^^^^^^
+>(props: { children: string }) => <h1>{props.children}</h1> : (props: { children: string; }) => string
+>                                                           : ^     ^^                     ^^^^^^^^^^^
+>props : { children: string; }
+>      : ^^^^^^^^^^^^      ^^^
+>children : string
+>         : ^^^^^^
+><h1>{props.children}</h1> : string
+>                          : ^^^^^^
+>h1 : any
+>   : ^^^
+>props.children : string
+>               : ^^^^^^
+>props : { children: string; }
+>      : ^^^^^^^^^^^^      ^^^
+>children : string
+>         : ^^^^^^
+>h1 : any
+>   : ^^^
+
+<Title>Hello, world!</Title>;
+><Title>Hello, world!</Title> : string
+>                             : ^^^^^^
+>Title : (props: { children: string; }) => string
+>      : ^     ^^                     ^^^^^^^^^^^
+>Title : (props: { children: string; }) => string
+>      : ^     ^^                     ^^^^^^^^^^^
+
+const Wrong = (props: { offspring: string }) => <h1>{props.offspring}</h1>;
+>Wrong : (props: { offspring: string; }) => string
+>      : ^     ^^                      ^^^^^^^^^^^
+>(props: { offspring: string }) => <h1>{props.offspring}</h1> : (props: { offspring: string; }) => string
+>                                                             : ^     ^^                      ^^^^^^^^^^^
+>props : { offspring: string; }
+>      : ^^^^^^^^^^^^^      ^^^
+>offspring : string
+>          : ^^^^^^
+><h1>{props.offspring}</h1> : string
+>                           : ^^^^^^
+>h1 : any
+>   : ^^^
+>props.offspring : string
+>                : ^^^^^^
+>props : { offspring: string; }
+>      : ^^^^^^^^^^^^^      ^^^
+>offspring : string
+>          : ^^^^^^
+>h1 : any
+>   : ^^^
+
+<Wrong>Byebye, world!</Wrong>
+><Wrong>Byebye, world!</Wrong> : string
+>                              : ^^^^^^
+>Wrong : (props: { offspring: string; }) => string
+>      : ^     ^^                      ^^^^^^^^^^^
+>Wrong : (props: { offspring: string; }) => string
+>      : ^     ^^                      ^^^^^^^^^^^
+
+=== /jsx/jsx-runtime.ts ===
+
+export {};
+=== /jsx/jsx-dev-runtime.ts ===
+
+export {};
+

tests/baselines/reference/jsxNamespaceElementChildrenAttributeIgnoredWhenReactJsx(jsx=react-jsxdev).errors.txt

@@ -0,0 +1,33 @@
+/test.tsx(7,2): error TS2741: Property 'offspring' is missing in type '{ children: string; }' but required in type '{ offspring: string; }'.
+
+
+==== /jsx.d.ts (0 errors) ====
+    declare namespace JSX {
+      interface IntrinsicElements {
+        h1: { children: string }
+      }
+
+      type Element = string;
+
+      interface ElementChildrenAttribute {
+        offspring: any;
+      }
+    }
+
+==== /test.tsx (1 errors) ====
+    const Title = (props: { children: string }) => <h1>{props.children}</h1>;
+
+    <Title>Hello, world!</Title>;
+
+    const Wrong = (props: { offspring: string }) => <h1>{props.offspring}</h1>;
+
+    <Wrong>Byebye, world!</Wrong>
+     ~~~~~
+!!! error TS2741: Property 'offspring' is missing in type '{ children: string; }' but required in type '{ offspring: string; }'.
+!!! related TS2728 /test.tsx:5:25: 'offspring' is declared here.
+
+==== /jsx/jsx-runtime.ts (0 errors) ====
+    export {};
+==== /jsx/jsx-dev-runtime.ts (0 errors) ====
+    export {};
+

tests/baselines/reference/jsxNamespaceElementChildrenAttributeIgnoredWhenReactJsx(jsx=react-jsxdev).js

@@ -0,0 +1,46 @@
+//// [tests/cases/compiler/jsxNamespaceElementChildrenAttributeIgnoredWhenReactJsx.tsx] ////
+
+//// [jsx.d.ts]
+declare namespace JSX {
+  interface IntrinsicElements {
+    h1: { children: string }
+  }
+
+  type Element = string;
+
+  interface ElementChildrenAttribute {
+    offspring: any;
+  }
+}
+
+//// [test.tsx]
+const Title = (props: { children: string }) => <h1>{props.children}</h1>;
+
+<Title>Hello, world!</Title>;
+
+const Wrong = (props: { offspring: string }) => <h1>{props.offspring}</h1>;
+
+<Wrong>Byebye, world!</Wrong>
+
+//// [jsx-runtime.ts]
+export {};
+//// [jsx-dev-runtime.ts]
+export {};
+
+
+//// [jsx-dev-runtime.js]
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//// [test.js]
+"use strict";
+var _this = this;
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_dev_runtime_1 = require("/jsx/jsx-dev-runtime");
+var _jsxFileName = "/test.tsx";
+var Title = function (props) { return (0, jsx_dev_runtime_1.jsxDEV)("h1", { children: props.children }, void 0, false, { fileName: _jsxFileName, lineNumber: 1, columnNumber: 47 }, _this); };
+(0, jsx_dev_runtime_1.jsxDEV)(Title, { children: "Hello, world!" }, void 0, false, { fileName: _jsxFileName, lineNumber: 1, columnNumber: 74 }, this);
+var Wrong = function (props) { return (0, jsx_dev_runtime_1.jsxDEV)("h1", { children: props.offspring }, void 0, false, { fileName: _jsxFileName, lineNumber: 5, columnNumber: 48 }, _this); };
+(0, jsx_dev_runtime_1.jsxDEV)(Wrong, { children: "Byebye, world!" }, void 0, false, { fileName: _jsxFileName, lineNumber: 5, columnNumber: 76 }, this);
+//// [jsx-runtime.js]
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

tests/baselines/reference/jsxNamespaceElementChildrenAttributeIgnoredWhenReactJsx(jsx=react-jsxdev).symbols

@@ -0,0 +1,61 @@
+//// [tests/cases/compiler/jsxNamespaceElementChildrenAttributeIgnoredWhenReactJsx.tsx] ////
+
+=== /jsx.d.ts ===
+declare namespace JSX {
+>JSX : Symbol(JSX, Decl(jsx.d.ts, 0, 0))
+
+  interface IntrinsicElements {
+>IntrinsicElements : Symbol(IntrinsicElements, Decl(jsx.d.ts, 0, 23))
+
+    h1: { children: string }
+>h1 : Symbol(IntrinsicElements.h1, Decl(jsx.d.ts, 1, 31))
+>children : Symbol(children, Decl(jsx.d.ts, 2, 9))
+  }
+
+  type Element = string;
+>Element : Symbol(Element, Decl(jsx.d.ts, 3, 3))
+
+  interface ElementChildrenAttribute {
+>ElementChildrenAttribute : Symbol(ElementChildrenAttribute, Decl(jsx.d.ts, 5, 24))
+
+    offspring: any;
+>offspring : Symbol(ElementChildrenAttribute.offspring, Decl(jsx.d.ts, 7, 38))
+  }
+}
+
+=== /test.tsx ===
+const Title = (props: { children: string }) => <h1>{props.children}</h1>;
+>Title : Symbol(Title, Decl(test.tsx, 0, 5))
+>props : Symbol(props, Decl(test.tsx, 0, 15))
+>children : Symbol(children, Decl(test.tsx, 0, 23))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(jsx.d.ts, 1, 31))
+>props.children : Symbol(children, Decl(test.tsx, 0, 23))
+>props : Symbol(props, Decl(test.tsx, 0, 15))
+>children : Symbol(children, Decl(test.tsx, 0, 23))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(jsx.d.ts, 1, 31))
+
+<Title>Hello, world!</Title>;
+>Title : Symbol(Title, Decl(test.tsx, 0, 5))
+>Title : Symbol(Title, Decl(test.tsx, 0, 5))
+
+const Wrong = (props: { offspring: string }) => <h1>{props.offspring}</h1>;
+>Wrong : Symbol(Wrong, Decl(test.tsx, 4, 5))
+>props : Symbol(props, Decl(test.tsx, 4, 15))
+>offspring : Symbol(offspring, Decl(test.tsx, 4, 23))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(jsx.d.ts, 1, 31))
+>props.offspring : Symbol(offspring, Decl(test.tsx, 4, 23))
+>props : Symbol(props, Decl(test.tsx, 4, 15))
+>offspring : Symbol(offspring, Decl(test.tsx, 4, 23))
+>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(jsx.d.ts, 1, 31))
+
+<Wrong>Byebye, world!</Wrong>
+>Wrong : Symbol(Wrong, Decl(test.tsx, 4, 5))
+>Wrong : Symbol(Wrong, Decl(test.tsx, 4, 5))
+
+=== /jsx/jsx-runtime.ts ===
+
+export {};
+=== /jsx/jsx-dev-runtime.ts ===
+
+export {};
+