Как безопасно определить HTMLCollectionOf Элементы в машинописи с реагировать?

Question

Я работаю над созданием линейной диаграммы d3 с реакцией и машинописью и обращаюсь к https://bl.ocks.org/larsenmtl/e3b8b7c2ca4787f77d78f58d41c3da91 для достижения функциональности при наведении мыши.

В какой-то момент мы должны получить элемент линии ипроверьте общую длину пути строки.

const linesElement: any =  document.getElementsByClassName("line");

let beginning = 0,
        end = linesElement[i].getTotalLength(),
        target = null;

    while (true){
      target = Math.floor((beginning + end) / 2);
      pos = linesElement[i].getPointAtLength(target);
      if ((target === end || target === beginning) && pos.x !== mouse[0]) {
          break;
      }
      if (pos.x > mouse[0])      end = target;
      else if (pos.x < mouse[0]) beginning = target;
      else break; //position found
    }

Когда я объявляю тип как any, я получаю Type declaration of 'any' loses type-safety. Consider replacing it with a more precise type.tslint(no-any).

Когда я объявляю тип как HTMLCollectionOf<Element>, я получаю следующееошибка.

TS2339: Property 'getTotalLength' does not exist on type 'Element'.
TS2339: Property 'getPointAtLength' does not exist on type 'Element'

У нас есть ограничение типа использования "any".Поэтому хотелось бы узнать, как лучше определить линии

Answer 1

getTotalLength функция определена только для SVG и отсутствует на обычных Element интерфейсах.Вот почему эта ошибка типа происходит.

Здесь вы можете проверить, является ли элемент экземпляром SVGPathElement:

if(linesElement[i] instanceof SVGPathElement) {
  end = linesElement[i].getTotalLength();
}