fix: do not use `JSX.ElementChildrenAttribute` under `jsx: react-jsx` or `jsx: react-jsxdev` by uhyo · Pull Request #60880 · microsoft/TypeScript

uhyo · 2024-12-30T05:34:07Z

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:

TypeScript/src/compiler/transformers/jsx.ts

Line 308 in 56a0825

return result && factory.createPropertyAssignment("children", result);

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)

…ct-jsxdev

Andarist · 2024-12-30T10:54:57Z

tests/cases/compiler/jsxNamespaceNoElementChildrenAttributeReactJsx.tsx

it might be good to add a test case that defines ElementChildrenAttribute as something different than children to verify that it's ignored in favor of "hard-coded" children

Indeed! Added a test case.

…react-jsx and react-jsxdev

jakebailey · 2025-01-18T06:09:21Z

@typescript-bot test it

typescript-bot · 2025-01-18T06:09:26Z

Starting jobs; this comment will be updated as builds start and complete.

Command	Status	Results
`test top400`	✅ Started	✅ Results
`user test this`	✅ Started	✅ Results
`run dt`	✅ Started	✅ Results
`perf test this faster`	✅ Started	👀 Results

typescript-bot · 2025-01-18T06:38:00Z

@jakebailey Here are the results of running the user tests with tsc comparing main and refs/pull/60880/merge:

Everything looks good!

typescript-bot · 2025-01-18T06:38:37Z

Hey @jakebailey, the results of running the DT tests are ready.

Everything looks the same!

You can check the log here.

typescript-bot · 2025-01-18T06:56:06Z

@jakebailey
The results of the perf run you requested are in!

Here they are:

tsc

Comparison Report - baseline..pr

_Metric	_baseline	_pr	_Delta	_Best	_Worst	_p-value
_{Compiler-Unions - node (v18.15.0, x64)}
_Errors	₃₄	₃₄	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_62,390	_62,390	_~	_~	_~	_{p=1.000 n=6}
_Types	_50,395	_50,395	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{196,172k (± 0.84%)}	_{195,623k (± 0.99%)}	_~	_193,002k	_196,909k	_{p=0.810 n=6}
_{Parse Time}	_{1.62s (± 0.64%)}	_{1.61s (± 0.61%)}	_~	_1.60s	_1.62s	_{p=0.437 n=6}
_{Bind Time}	_{0.87s (± 1.34%)}	_{0.88s (± 1.56%)}	_~	_0.86s	_0.90s	_{p=0.563 n=6}
_{Check Time}	_{11.78s (± 0.57%)}	_{11.79s (± 0.72%)}	_~	_11.70s	_11.93s	_{p=1.000 n=6}
_{Emit Time}	_{3.32s (± 3.48%)}	_{3.33s (± 3.54%)}	_~	_3.25s	_3.56s	_{p=0.872 n=6}
_{Total Time}	_{17.59s (± 0.68%)}	_{17.61s (± 0.98%)}	_~	_17.43s	_17.91s	_{p=1.000 n=6}
_{angular-1 - node (v18.15.0, x64)}
_Errors	₃₇	₃₇	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_947,969	_947,969	_~	_~	_~	_{p=1.000 n=6}
_Types	_410,955	_410,955	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{1,225,865k (± 0.01%)}	_{1,225,847k (± 0.00%)}	_~	_1,225,737k	_1,225,902k	_{p=0.575 n=6}
_{Parse Time}	_{8.05s (± 0.54%)}	_{8.08s (± 1.00%)}	_~	_7.94s	_8.14s	_{p=0.261 n=6}
_{Bind Time}	_{2.29s (± 0.89%)}	_{2.28s (± 0.82%)}	_~	_2.26s	_2.31s	_{p=0.286 n=6}
_{Check Time}	_{38.23s (± 0.31%)}	_{38.16s (± 0.42%)}	_~	_37.94s	_38.37s	_{p=0.572 n=6}
_{Emit Time}	_{18.37s (± 0.33%)}	_{18.28s (± 0.57%)}	_~	_18.21s	_18.46s	_{p=0.170 n=6}
_{Total Time}	_{66.93s (± 0.18%)}	_{66.80s (± 0.11%)}	_{-0.13s (- 0.20%)}	_66.66s	_66.88s	_{p=0.045 n=6}
_{mui-docs - node (v18.15.0, x64)}
_Errors	₀	₀	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_2,444,602	_2,444,602	_~	_~	_~	_{p=1.000 n=6}
_Types	_896,634	_896,634	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{2,305,803k (± 0.00%)}	_{2,305,854k (± 0.00%)}	_~	_2,305,700k	_2,306,005k	_{p=0.230 n=6}
_{Parse Time}	_{10.78s (± 0.52%)}	_{10.80s (± 0.50%)}	_~	_10.73s	_10.89s	_{p=0.688 n=6}
_{Bind Time}	_{2.53s (± 0.61%)}	_{2.54s (± 0.63%)}	_~	_2.51s	_2.55s	_{p=0.365 n=6}
_{Check Time}	_{88.18s (± 0.86%)}	_{88.51s (± 1.93%)}	_~	_87.27s	_91.26s	_{p=0.575 n=6}
_{Emit Time}	_{0.35s (± 2.98%)}	_{0.35s (± 2.14%)}	_~	_0.34s	_0.36s	_{p=0.437 n=6}
_{Total Time}	_{101.84s (± 0.71%)}	_{102.20s (± 1.66%)}	_~	_100.87s	_104.89s	_{p=0.689 n=6}
_{self-build-src - node (v18.15.0, x64)}
_Errors	₀	₀	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_1,228,459	_1,228,459	_~	_~	_~	_{p=1.000 n=6}
_Types	_266,873	_266,873	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{2,971,149k (±10.01%)}	_{2,996,101k (± 7.83%)}	_~	_2,516,543k	_3,092,967k	_{p=0.689 n=6}
_{Parse Time}	_{8.34s (± 1.32%)}	_{8.34s (± 0.97%)}	_~	_8.21s	_8.40s	_{p=1.000 n=6}
_{Bind Time}	_{2.65s (± 2.50%)}	_{2.65s (± 1.11%)}	_~	_2.62s	_2.70s	_{p=0.936 n=6}
_{Check Time}	_{53.21s (± 0.43%)}	_{53.19s (± 0.83%)}	_~	_52.35s	_53.67s	_{p=1.000 n=6}
_{Emit Time}	_{4.28s (± 3.33%)}	_{4.27s (± 1.67%)}	_~	_4.17s	_4.34s	_{p=1.000 n=6}
_{Total Time}	_{68.49s (± 0.33%)}	_{68.45s (± 0.80%)}	_~	_67.41s	_69.03s	_{p=0.810 n=6}
_{self-build-src-public-api - node (v18.15.0, x64)}
_Errors	₀	₀	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_1,228,459	_1,228,459	_~	_~	_~	_{p=1.000 n=6}
_Types	_266,873	_266,873	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{3,036,422k (± 9.76%)}	_{2,673,339k (±14.00%)}	_~	_2,430,659k	_3,157,378k	_{p=0.173 n=6}
_{Parse Time}	_{7.06s (± 0.80%)}	_{6.87s (± 1.42%)}	_{-0.19s (- 2.67%)}	_6.75s	_6.98s	_{p=0.005 n=6}
_{Bind Time}	_{2.13s (± 1.47%)}	_{2.15s (± 0.96%)}	_~	_2.13s	_2.18s	_{p=0.518 n=6}
_{Check Time}	_{42.95s (± 0.52%)}	_{42.86s (± 0.47%)}	_~	_42.67s	_43.13s	_{p=0.471 n=6}
_{Emit Time}	_{3.50s (± 2.05%)}	_{3.43s (± 2.32%)}	_~	_3.36s	_3.58s	_{p=0.173 n=6}
_{Total Time}	_{55.65s (± 0.51%)}	_{55.31s (± 0.58%)}	_~	_55.05s	_55.81s	_{p=0.128 n=6}
_{self-compiler - node (v18.15.0, x64)}
_Errors	₀	₀	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_262,628	_262,628	_~	_~	_~	_{p=1.000 n=6}
_Types	_106,697	_106,697	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{440,819k (± 0.03%)}	_{440,779k (± 0.02%)}	_~	_440,659k	_440,971k	_{p=0.575 n=6}
_{Parse Time}	_{3.56s (± 0.81%)}	_{3.54s (± 0.61%)}	_~	_3.52s	_3.57s	_{p=0.625 n=6}
_{Bind Time}	_{1.32s (± 1.07%)}	_{1.32s (± 0.93%)}	_~	_1.30s	_1.33s	_{p=0.564 n=6}
_{Check Time}	_{18.98s (± 0.26%)}	_{19.02s (± 0.54%)}	_~	_18.90s	_19.17s	_{p=0.470 n=6}
_{Emit Time}	_{1.52s (± 0.99%)}	_{1.52s (± 1.27%)}	_~	_1.49s	_1.54s	_{p=1.000 n=6}
_{Total Time}	_{25.38s (± 0.25%)}	_{25.41s (± 0.47%)}	_~	_25.28s	_25.57s	_{p=0.936 n=6}
_{ts-pre-modules - node (v18.15.0, x64)}
_Errors	₇₀	₇₀	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_226,095	_226,095	_~	_~	_~	_{p=1.000 n=6}
_Types	_94,488	_94,488	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{371,625k (± 0.01%)}	_{371,624k (± 0.01%)}	_~	_371,556k	_371,679k	_{p=0.810 n=6}
_{Parse Time}	_{2.33s (± 0.35%)}	_{2.32s (± 0.57%)}	_~	_2.31s	_2.34s	_{p=0.507 n=6}
_{Bind Time}	_{1.33s (± 0.61%)}	_{1.35s (± 1.75%)}	_~	_1.33s	_1.38s	_{p=0.270 n=6}
_{Check Time}	_{13.71s (± 0.25%)}	_{13.71s (± 0.28%)}	_~	_13.66s	_13.77s	_{p=1.000 n=6}
_{Emit Time}	_0.00s	_0.00s	_~	_~	_~	_{p=1.000 n=6}
_{Total Time}	_{17.37s (± 0.18%)}	_{17.39s (± 0.23%)}	_~	_17.35s	_17.46s	_{p=0.629 n=6}
_{vscode - node (v18.15.0, x64)}
_Errors	₃	₃	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_3,251,957	_3,251,957	_~	_~	_~	_{p=1.000 n=6}
_Types	_1,119,191	_1,119,191	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{3,317,206k (± 0.00%)}	_{3,317,155k (± 0.00%)}	_~	_3,317,074k	_3,317,223k	_{p=0.229 n=6}
_{Parse Time}	_{11.58s (± 0.20%)}	_{11.59s (± 0.48%)}	_~	_11.52s	_11.69s	_{p=0.686 n=6}
_{Bind Time}	_{3.80s (± 0.49%)}	_{3.79s (± 0.32%)}	_~	_3.78s	_3.81s	_{p=0.323 n=6}
_{Check Time}	_{73.99s (± 0.30%)}	_{74.01s (± 0.23%)}	_~	_73.90s	_74.32s	_{p=0.936 n=6}
_{Emit Time}	_{23.34s (± 0.17%)}	_{23.32s (± 0.25%)}	_~	_23.22s	_23.38s	_{p=0.746 n=6}
_{Total Time}	_{112.71s (± 0.23%)}	_{112.72s (± 0.11%)}	_~	_112.61s	_112.88s	_{p=0.575 n=6}
_{webpack - node (v18.15.0, x64)}
_Errors	₀	₀	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_291,595	_291,595	_~	_~	_~	_{p=1.000 n=6}
_Types	_118,971	_118,971	_~	_~	_~	_{p=1.000 n=6}
_{Memory used}	_{445,211k (± 0.01%)}	_{445,216k (± 0.01%)}	_~	_445,152k	_445,274k	_{p=0.936 n=6}
_{Parse Time}	_{3.29s (± 0.50%)}	_{3.29s (± 0.49%)}	_~	_3.27s	_3.31s	_{p=0.623 n=6}
_{Bind Time}	_{1.48s (± 0.85%)}	_{1.47s (± 1.26%)}	_~	_1.45s	_1.50s	_{p=0.565 n=6}
_{Check Time}	_{15.67s (± 0.16%)}	_{15.65s (± 0.29%)}	_~	_15.58s	_15.70s	_{p=0.687 n=6}
_{Emit Time}	_0.00s	_0.00s	_~	_~	_~	_{p=1.000 n=6}
_{Total Time}	_{20.43s (± 0.13%)}	_{20.42s (± 0.29%)}	_~	_20.33s	_20.47s	_{p=1.000 n=6}
_{xstate-main - node (v18.15.0, x64)}
_Errors	₅	₅	_~	_~	_~	_{p=1.000 n=6}
_Symbols	_555,050	_555,050	_~	_~	_~	_{p=1.000 n=6}
_Types	_186,115	_186,110	_{-5 (- 0.00%)}	_~	_~	_{p=0.001 n=6}
_{Memory used}	_{493,996k (± 0.02%)}	_{494,035k (± 0.01%)}	_~	_493,985k	_494,070k	_{p=0.575 n=6}
_{Parse Time}	_{3.41s (± 0.48%)}	_{3.41s (± 0.60%)}	_~	_3.39s	_3.45s	_{p=0.669 n=6}
_{Bind Time}	_{1.18s (± 1.07%)}	_{1.19s (± 0.68%)}	_~	_1.18s	_1.20s	_{p=0.062 n=6}
_{Check Time}	_{19.72s (± 1.98%)}	_{19.63s (± 0.47%)}	_~	_19.47s	_19.72s	_{p=0.377 n=6}
_{Emit Time}	_0.00s	_0.00s	_~	_~	_~	_{p=1.000 n=6}
_{Total Time}	_{24.31s (± 1.61%)}	_{24.23s (± 0.40%)}	_~	_24.08s	_24.35s	_{p=0.521 n=6}

System info unknown

Hosts

node (v18.15.0, x64)

Scenarios

Compiler-Unions - node (v18.15.0, x64)
angular-1 - node (v18.15.0, x64)
mui-docs - node (v18.15.0, x64)
self-build-src - node (v18.15.0, x64)
self-build-src-public-api - node (v18.15.0, x64)
self-compiler - node (v18.15.0, x64)
ts-pre-modules - node (v18.15.0, x64)
vscode - node (v18.15.0, x64)
webpack - node (v18.15.0, x64)
xstate-main - node (v18.15.0, x64)

_Benchmark	_Name	_Iterations
_Current	_pr	₆
_Baseline	_baseline	₆

Developer Information:

Download Benchmarks

typescript-bot · 2025-01-18T07:58:34Z

@jakebailey Here are the results of running the top 400 repos with tsc comparing main and refs/pull/60880/merge:

Everything looks good!

uhyo added 2 commits December 30, 2024 13:55

test: add failing test for microsoft#60572

d2bac4b

fix: hard-code JsxElementChildrenPropertyName under react-jsx and rea…

35d0c57

…ct-jsxdev

typescript-bot added the For Backlog Bug PRs that fix a backlog bug label Dec 30, 2024

Andarist reviewed Dec 30, 2024

View reviewed changes

test: add test case to verify ElementChildrenAttribute is ignored in …

3959879

…react-jsx and react-jsxdev

andrewbranch approved these changes Jan 23, 2025

View reviewed changes

iisaduan approved these changes Jan 23, 2025

View reviewed changes

iisaduan merged commit 0e371c4 into microsoft:main Jan 24, 2025
32 checks passed

uhyo deleted the fix-60572 branch January 24, 2025 01:14

uhyo mentioned this pull request Mar 5, 2025

TS 5.8 JSX.ElementChildrenAttribute break #61354

Closed

sandersn removed this from PR Backlog Apr 22, 2025

Andarist mentioned this pull request Jun 5, 2025

Port "fix: do not use JSX.ElementChildrenAttribute under jsx: react-jsx or jsx: react-jsxdev" microsoft/typescript-go#1067

Merged

microsoft locked as resolved and limited conversation to collaborators Oct 15, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

fix: do not use `JSX.ElementChildrenAttribute` under `jsx: react-jsx` or `jsx: react-jsxdev`#60880
iisaduan merged 3 commits intomicrosoft:mainfrom
uhyo:fix-60572

uhyo commented Dec 30, 2024 •

edited

Loading

Uh oh!

Andarist Dec 30, 2024

Uh oh!

uhyo Dec 30, 2024

Uh oh!

jakebailey commented Jan 18, 2025

Uh oh!

typescript-bot commented Jan 18, 2025 •

edited

Loading

Uh oh!

typescript-bot commented Jan 18, 2025

Uh oh!

typescript-bot commented Jan 18, 2025

Uh oh!

typescript-bot commented Jan 18, 2025

tsc

Uh oh!

typescript-bot commented Jan 18, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

uhyo commented Dec 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🖼️ Background

🦾 Solution

🌵 Current Behavior

✨ New Behavior

Uh oh!

Andarist Dec 30, 2024

Choose a reason for hiding this comment

Uh oh!

uhyo Dec 30, 2024

Choose a reason for hiding this comment

Uh oh!

jakebailey commented Jan 18, 2025

Uh oh!

typescript-bot commented Jan 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

typescript-bot commented Jan 18, 2025

Uh oh!

typescript-bot commented Jan 18, 2025

Uh oh!

typescript-bot commented Jan 18, 2025

tsc

Uh oh!

typescript-bot commented Jan 18, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

uhyo commented Dec 30, 2024 •

edited

Loading

typescript-bot commented Jan 18, 2025 •

edited

Loading