JS checking makes JSX props optional when inferred through JSX.LibraryManagedAttributes

Bug Report

Reported as part of #45140, moving to its own issue.

🔎 Search Terms

js jsx props optional

🕗 Version & Regression Information

• This is the behavior in every version I tried

⏯ Playground Link

Playground link with relevant code

💻 Code

// @Filename: index.jsx

import React from "react";
import PropTypes from "prop-types";

function MyComponent({ prop1, prop2, prop3 }) {
  return (
    <div>
      <span>{prop1}</span>
      <span>{prop2}</span>
    </div>
  );
}

MyComponent.propTypes = {
  prop1: PropTypes.string.isRequired,
  prop2: PropTypes.bool,
  prop3: PropTypes.shape({
    p1: PropTypes.string
  })
};

// All props show as optional in quick info / completions, and there's no error for missing prop1.
// The type of the JSX props is inferred from `MyComponent.propTypes` via JSX.LibraryManagedAttributes,
// but the optionality appears wrong. Switching the language to TypeScript makes this behave as expected.
(<MyComponent prop2 />)

🙁 Actual behavior

All props show as optional in quick info / completions, and there's no error for missing prop1. The type of the JSX props is inferred from MyComponent.propTypes via JSX.LibraryManagedAttributes, but the optionality appears wrong. Switching the language to TypeScript makes this behave as expected.

🙂 Expected behavior

The prop1 JSX prop shows as required and an error is shown on the JSX element since it’s missing.

Inizia con il TypeScript Playground collegato e l'esempio index.jsx, concentrandoti su JSX.LibraryManagedAttributes e sull'assegnazione di propTypes. Confronta il controllo JavaScript con lo stesso codice in TypeScript per capire perché l'obbligatorietà viene persa. È completato quando prop1 viene mostrato come obbligatorio e produce un errore per una prop mancante.