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

Happy Holidays! Fixes #60572

🖼️ Background

Under jsx: react-jsx or jsx: react-jsxdev, the name of the prop for JSX children is always children. The jsx transformer properly implements this:

However, the type checker didin't take this into consideration. Instead, it used JSX.ElementChildrenAttribute to determine the name of prop. If type definition lacks this interface, undesirable compiler errors are emitted (like the one mentioned in the linked issue).

It is of note that, I believe, no practical type definition for JSX libraries ever provided such definition that would lead to errors like those.

That said, I think the current behavior is still a bit harmful to those who want to learn how to write type definitions for JSX libraries, so proposing a fix.

🦾 Solution

This PR fixes the getJsxElementChildrenPropertyName function so that children is hard-coded under these jsx modes.

🌵 Current Behavior

code:

//@filename: /jsx.d.ts
declare namespace JSX {
  interface IntrinsicElements {
    h1: { children: string }
  }

  type Element = string;
}

//@filename: /test.tsx
const Title = (props: { children: string }) => <h1>{props.children}</h1>;

const element = <Title>Hello, world!</Title>;

Errors:

    const Title = (props: { children: string }) => <h1>{props.children}</h1>;
                                                    ~~
!!! error TS2741: Property 'children' is missing in type '{}' but required in type '{ children: string; }'.
!!! related TS2728 /jsx.d.ts:3:11: 'children' is declared here.

    const element = <Title>Hello, world!</Title>;
                     ~~~~~
!!! error TS2741: Property 'children' is missing in type '{}' but required in type '{ children: string; }'.
!!! related TS2728 /test.tsx:1:25: 'children' is declared here.

✨ New Behavior

(No error)