У меня есть эта ошибка машинописного текста Element implicitly has an 'any' type because index expression is not of type 'number' при попытке ввести ключ из Object.keys для getElementsByTagName('button').

Вот мой код:

const buttonElements: HTMLCollectionOf<HTMLButtonElement> = blockRef.current.getElementsByTagName(
  'button',
);
if (buttonElements) {
  Object.keys(buttonElements).forEach((key: string) => {
    buttonElements[key].addEventListener('click', handleOpenModal, false);
  });
}

Здесь я использовал тип key: string в forEach() и получаю ошибку типа в buttonElements[key]. Я обнаружил аналогичные проблемы, с которыми сталкивались другие люди, и обнаружил, что использование подписи индекса было решением, однако я не уверен, как добавить подпись индекса или расширить объект, учитывая, что этот объект имеет тип HTMLCollectionOf<HTMLButtonElement>.

Методы, которые я пробовал:

  • buttonElements[key as keyof HTMLCollectionOf<HTMLButtonElement>]
  • buttonElements[key as string]
  • const buttonElements: HTMLCollectionOf<string, HTMLButtonElement> = blockRef.current.getElementsByTagName('button',);

Любая помощь в правильном вводе key или лучшем вводе buttonElements приветствуется. Спасибо вам всем!

0
kdizzle 27 Сен 2022 в 21:31
1
Вам нужно преобразовать ключ в число.
 – 
caTS
27 Сен 2022 в 21:33
Просто сделайте его массивом Array.from(buttonElements).forEach(button => {}) или используйте querySelectorAll, который имеет forEach const buttonElements blockRef.current.querySelectorAll("button"); buttonElements.forEach(button => {});
 – 
epascarello
27 Сен 2022 в 21:39

1 ответ

Это связано с тем, что Object.keys() возвращает массив ключей, но на самом деле HTMLCollectionOf<> содержит объект, в котором в качестве индексов используются числа. Это означает, что вам нужно вручную преобразовать key в число (например, с помощью унарного оператора + как такового: +key), прежде чем использовать его для доступа к любой записи в buttonElement коллекция:

Object.keys(buttonElements).forEach((key) => {
  buttonElements[+key].addEventListener('click', handleOpenModal, false);
});

Кроме того, я бы на самом деле рекомендовал не использовать getElementsByTagName, когда querySelectorAll является более современным подходом и на самом деле является итерируемым, и вы можете использовать for...of для итерации по списку узлов:

const buttonElements = blockRef.current.querySelectorAll('button');
for (const buttonElement of buttonElements) {
  buttonElement..ddEventListener('click', handleOpenModal, false);
}
0
Terry 27 Сен 2022 в 21:40