Выбор круга SVG с помощью TypeScript
У меня есть очень простой элемент 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");
но я получаю сообщение об ошибке:
Type 'HTMLElement' is missing the following properties: cx, cy, r.
Хорошо, достаточно честно. Поэтому я пробую утверждение типа:
Вторая попытка:
var circle: SVGCircleElement = (<SVGCircleElement>document.getElementById("myCircle"));
и я получаю ошибку:
Conversion of type HTMLElement to SVGCircleElement may be a mistake because...
Этот метод выбора элементов работает с другими элементами, такими как <canvas>, но не с SVG:
Вопрос:
Каков одобренный TypeScript способ выбора myCircle из DOM, желательно без приведения типов? (Кстати, я использую Typescript 3.3)
Ответы 1
это, по крайней мере, один из способов - определить typeguards, которые позволяют вам доказать, что машинописный текст действительно является кругом, нет «лучшего способа», это действительно зависит от варианта использования, но я чувствую, что это более сильный подход к литью.
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;
}
вам не нужно приводить, я отредактирую фрагмент, и нет ничего встроенного, что позволит вам сделать это, потому что в javascript нет getSvgById, getElementById не может знать с помощью статического анализа тип элемента, который вы пытаетесь получить.
Я добавил редактирование с помощью функции getSvgCricleById, которая позволяет вам вернуть тип круга SVG без приведения к какому-либо
Черт... слишком много кода для простого селектора элементов. Я думаю, что буду придерживаться myCircle: SVGCircleElement = <any>document.getElementById("myCircle"); Я ценю вашу помощь!
проблема с кастингом заключается в том, что он не обрабатывает случай, когда элемент с идентификатором «myCircle» на самом деле не был кругом, но вы солгали машинописному тексту и сказали, что это круг. Охранники дают вам возможность доказать, что что-то действительно является кругом.
Значит, единственный способ сделать это — по-прежнему приводить к типу
<any>? Я удивлен, что в TypeScript нет встроенного способа сделать это...