Выбор SVG-круга с помощью TypeScript

Question

У меня очень простой элемент SVG <circle> в моем DOM, который я хочу выбрать с помощью TypeScript:

<svg viewBox="0 0 200 200">
  <circle cx="50" cy="50" r="45" id="myCircle"/>
</svg>

---

Первая попытка:

Я пытаюсь выбратьобведите следующим образом:

var circle: SVGCircleElement = document.getElementById("myCircle");

но я получаю ошибку:

Типу 'HTMLElement' не хватает следующих свойств: cx, cy, r.

Хорошо, достаточно справедливо.Поэтому я пробую утверждение типа:

Вторая попытка:

var circle: SVGCircleElement = (<SVGCircleElement>document.getElementById("myCircle"));

и получаю ошибку:

Преобразование типа HTMLElementдля SVGCircleElement может быть ошибкой, потому что ...

Этот метод выбора элементов, кажется, работает с другими элементами, такими как <canvas>, но не для SVG:

Вопрос:

Каков одобренный TypeScript способ выбора myCircle из DOM, предпочтительно без обращения к принуждению типов?(Кстати, я использую Typescript 3.3)

Answer 1

это, по крайней мере, один из способов определить защиту типа, которая позволяет вам доказать, что машинопись действительно круг, нет «лучшего способа», это действительно зависит от варианта использования, но я чувствую, что это более сильный подход к приведению.

const isHTMLCircle = (something: HTMLElement | SVGCircleElement): something is SVGCircleElement => {
    if(!something) return false;
    return something instanceof SVGCircleElement;
}

const getSvgCircleById = (id: string): SVGCircleElement | null => {
    const element = document.getElementById("id");
    if(!element) return null;
    if(isHTMLCircle(element)) {
        return element;
    }
    return null;
}