Repository: TypeScript
Issue: Improve quick info on JSX component elements
Labels: Suggestion,Awaiting More Feedback,Domain: Quick Info


*TS Template added by @mjbvz*

**TypeScript Version**: 4.4.0-dev.20210713

**Search Terms**
- react
- prop-types
- jsx

---

<!-- ⚠️⚠️ Do Not Delete This! bug_report_template ⚠️⚠️ -->
<!-- Please read our Rules of Conduct: https://opensource.microsoft.com/codeofconduct/ -->
<!-- 🕮 Read our guide about submitting issues: https://github.com/microsoft/vscode/wiki/Submitting-Bugs-and-Suggestions -->
<!-- 🔎 Search existing issues to avoid creating duplicates. -->
<!-- 🧪 Test using the latest Insiders build to see if your issue has already been fixed: https://code.visualstudio.com/insiders/ -->
<!-- 💡 Instead of creating your report here, use 'Report Issue' from the 'Help' menu in VS Code to pre-fill useful information. -->
<!-- 🔧 Launch with `code --disable-extensions` to check. -->
Does this issue occur when all extensions are disabled?: Yes

<!-- 🪓 If you answered No above, use 'Help: Start Extension Bisect' from Command Palette to try to identify the cause. -->
<!-- 📣 Issues caused by an extension need to be reported directly to the extension publisher. The 'Help > Report Issue' dialog can assist with this. -->
- VS Code Version: 1.58.2 (was happening before this version as well)
- OS Version: Mac OS 10.14

Steps to Reproduce:

1. Create a React functional component like this:

```
import React from "react";
import PropTypes from "prop-types";

//  vscode is able to infer the types correctly in autocomplete
// as this is a functional component, with prop types
// Please note that vscode still does not show the correct types
// when hovering on the component usage

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
  })
};

MyComponent.defaultProps = {
  prop2: false
};

export default MyComponent;
```

2. At the point of usage, where you have imported this component, hover on the usage, you will see that vscode is able to identify the function signature, but not the types of the function arguments, and shows them as `any`

<img width="697" alt="Screenshot 2021-07-21 at 1 30 58 AM" src="https://user-images.githubusercontent.com/12510548/126449768-94081dd0-f5df-4cb7-a2c7-a1742c13f96c.png">

3. If you hovber over the specific prop though, you would see that vscode shows the correct type (inferred from prop types) and also provides autocompletion for the prop name. (Although there is still an issue that it shows all the props as optional)

<img width="1034" alt="Screenshot 2021-07-21 at 1 31 04 AM" src="https://user-images.githubusercontent.com/12510548/126449980-beadb6be-b885-4c80-8db6-78078f65fe9e.png">


### Example:
https://codesandbox.io/s/vscode-intellisense-proptypes-fc-w-destructuring-w-proptypes-cngth?from-embed=&file=/src/MyComponent.js:0-655

### Expectation:
I would have expected that 
- vscode would be able to infer the types on hovering as well, same as it can do while providing autocomplete suggestion for the prop
- vscode would not show all the props as optional, since it seems that it can infer prop names and types from prop types, it should also be able to infer whether it is required or optional.