Choosing an SVG Circle Using TypeScript

Question

Choosing an SVG Circle Using TypeScript

I am facing an issue with selecting a simple SVG <circle> element in my DOM using TypeScript:

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

Initial approach:

My initial attempt to select the circle was:

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

However, I encountered the error:

Type 'HTMLElement' is missing the following properties: cx, cy, r.

I then tried type-assertion:

Second approach:

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

But this resulted in the error:

Conversion of type HTMLElement to SVGCircleElement may be a mistake because...

This method seems to work for other elements like <canvas> but not for SVGs:

https://i.sstatic.net/g6VxD.jpg

Query:

What is the recommended way in TypeScript to select myCircle from the DOM without relying on type coercion? (I am using Typescript 3.3)

typescript dom svg

Answer 1

Answer №1

One approach to defining typeguards in TypeScript is by using a method like the one below, which helps confirm that a given element is indeed a circle. While there isn't a single "best way" to do this, the effectiveness of such an approach often depends on the specific use case.

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;
}

Answer 2

One approach to defining typeguards in TypeScript is by using a method like the one below, which helps confirm that a given element is indeed a circle. While there isn't a single "best way" to do this, the effectiveness of such an approach often depends on the specific use case.

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;
}

Choosing an SVG Circle Using TypeScript

Initial approach:

Second approach:

Query:

Answer №1

Similar questions

Mastering the art of crafting form elements with jQuery

Having trouble accessing props on children in TypeScript while using React.Children.toArray?

Can you explain the distinction between 'rxjs/operators' and 'rxjs/internal/operators'?

Problem with Typescript: The type '{ x;y }' is required to have a '[Symbol.iterator]()' method

Electron does not have the capability to utilize Google's Speech to Text engine

Waiting for asynchronous subscriptions with RxJS Subjects in TypeScript is essential for handling data streams efficiently

Exploring how to traverse a <router-outlet> within its container

Working with multiple observables in an array of properties using RXJS

How can you make sure that VS Code always utilizes relative paths for auto imports in TypeScript?

What could be the reason my component is not displaying the ContentChild associated with a directive?

Is it possible to retrieve all mandatory attributes of a TypeScript object?

The error message "Property 'hideKeyboardAccessoryBar' does not exist on type 'Keyboard'." appeared while using the IONIC Moodle App

Display JSON data in a table format using Angular

Module not located following the completion of project compilation

Set the value obtained from a resolved promise to a mutable reference object in a React component

The type 'ClassA<{ id: number; name: string; }>' cannot be assigned to the type 'ClassA<Record<string, any>>'

What are the steps to resolve the error message "Make sure the component is enclosed within a <Provider>" while using Next 14 with Redux Toolkit?

Assigning object properties from a request to every item in an observable array of objects using RxJS

Tips for utilizing the JS attribute "offsetWidth" within Angular 4

What is the best way to transform typescript defined string types into an array of strings?