Тип. Как объявить коллекцию DOM?

Question

Я пробовал:

let $inputsCollection:HTMLCollection = document.body.querySelectorAll('input'); 

let $inputsCollection:HTMLCollection = document.body.querySelectorAll('input') as HTMLCollection; 

let $inputsCollection = document.body.querySelectorAll('input') as HTMLCollection; 

Я попытался несколько способов, но ни одна работа.

Answer 1

querySelectorAll не возвращает HTMLCollection, но NodeList. Нет смысла пытаться преобразовать NodeList в HTMLCollection. Вы можете сделать это, хотя:

let $inputsCollection: NodeListOf<HTMLInputElement> = 
    document.body.querySelectorAll('input'); 

Дело выше использует HTMLInputElement поэтому все элементы в списке должны быть из input элементов в HTML. Для случаев, когда вы получите разнородные элементы из запроса, вы можете сделать:

let $inputsCollection: NodeListOf<Element> = 
    document.body.querySelectorAll('*'); 

Это даже позволяют другие типы узлов, чем Element объектов, хотя querySelectorAll не может возвращать такие узлы:

let $inputsCollection2: NodeList = document.body.querySelectorAll('*'); 

FYI, методы, которые возвращают HTMLCollection объекты являются .getElementsBy... семейство методов (.getElementsByClassName, .getElementsByTagName и т.д.)