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.

Beginne mit dem verknüpften TypeScript Playground und dem Beispiel index.jsx und konzentriere dich auf JSX.LibraryManagedAttributes und die Zuweisung von propTypes. Vergleiche die JavaScript-Prüfung mit demselben Code in TypeScript, um nachzuvollziehen, warum die Erforderlichkeit verloren geht. Fertig bedeutet, dass prop1 als erforderlich angezeigt wird und einen Fehler wegen eines fehlenden Props erzeugt.