Get the correct type of elements with querySelector

[zuhairtaha]

Suggestion

🔍 Search Terms

document query selector elements type

✅ Viability Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

When we use document.querySelector and querySelectorAll I suggest getting the correct element type instead of Element if it starts with a valid HTML tag

📃 Motivating Example

const ul = document.querySelector('ul.list');
const input = document.querySelector('.container input[type=text]');

The inferred type of ul should be HTMLUListElement instead of Element
and for input it should be HTMLInputElement not Element

💻 Use Cases

With this feature we will not need to write something like this

const input = document.querySelector('.container input[type=text]') as HTMLInputElement;

Note
In some cases, it is obviously an item type, but in other cases cannot be discovered like querySelector('.menu')

[andrewbranch]

Duplicate of #29037