Variable type assignment failed due to an error

Question

Variable type assignment failed due to an error

I'm feeling a bit unsure about whether my query pertains to WebStorm, Angular2, or Typescript.

Currently, I have an Angular2 build set up and I am using WebStorm 2016.1.2 for editing purposes. In one of my components, I obtain a reference to a DOM element by simply using

document.getElementById('some-el');

and then pass this to a service method:

calc(el:HTMLElement){
    this.height = el.offsetHeight;
    this.width = el.offsetWidth;

    let span:HTMLElement = el.querySelector("span");
    this.pos = span.offsetTop - span.offsetHeight;
}

Everything seems to be working fine as no errors appear in the browser, but I do encounter an error in WebStorm related to el.querySelector("span");

The error message states:

Initializer type Element is not assignable to variable type HTMLElement

I am unsure if this issue lies with WebStorm or if it stems from me inaccurately typing the elements. When I change the type of span to Element, the error disappears but then offsetTop and offsetHeight are highlighted as incorrect. Quite perplexing.

Although my actual project seems unaffected when I run it, I can't help but wonder if this is something within my code that needs correcting or just an editor-related hiccup that can be disregarded?

Thank you for your assistance!

typescript angular webstorm

Answer 1

Answer №1

To successfully implement this, all you have to do is cast it:

calculateDimensions(element:HTMLElement){
    this.height = element.offsetHeight;
    this.width = element.offsetWidth;

    let spanElement:HTMLElement = <HTMLElement> element.querySelector("span");
    this.position = spanElement.offsetTop - spanElement.offsetHeight;
}

Alternatively, you can utilize type assertion:

let spanElement:HTMLElement = element.querySelector("span") as HTMLElement;

The reason why the method querySelector returns an Element and not an HTMLElement, as you have specified, is because of the type declaration for spanElement. By using type assertions, you inform the compiler that you are aware it is indeed an HTMLElement.

Another option is to use HTMLSpanElement instead of HTMLElement, which offers more specificity, similar to how HTMLElement provides more detail than Element (hence, when changed to Element, the properties like offsetTop and offsetHeight became inaccessible).

Answer 2

To successfully implement this, all you have to do is cast it:

calculateDimensions(element:HTMLElement){
    this.height = element.offsetHeight;
    this.width = element.offsetWidth;

    let spanElement:HTMLElement = <HTMLElement> element.querySelector("span");
    this.position = spanElement.offsetTop - spanElement.offsetHeight;
}

Alternatively, you can utilize type assertion:

let spanElement:HTMLElement = element.querySelector("span") as HTMLElement;

The reason why the method querySelector returns an Element and not an HTMLElement, as you have specified, is because of the type declaration for spanElement. By using type assertions, you inform the compiler that you are aware it is indeed an HTMLElement.

Another option is to use HTMLSpanElement instead of HTMLElement, which offers more specificity, similar to how HTMLElement provides more detail than Element (hence, when changed to Element, the properties like offsetTop and offsetHeight became inaccessible).

Variable type assignment failed due to an error

Answer №1

Similar questions

Is it necessary to configure Webpack or use a plugin to remove console.log() statements by default in an Angular Application, or does it do so automatically?

Error: Namespace declaration does not have a type annotation - TypeScript/Babel

Having trouble compiling an Ionic/Cordova app for Android?

Error encountered when using withRouter together with withStyles in Typescript on ComponentName

Is it necessary to conceal Angular navigation controls when the user is not authenticated?

Create an array form with the first input at index 0 filled out

Steps to load dynamic configuration in AngularFire2

Discovering GraphQl errors within a React component or custom hook is a crucial skill to master

A series of functions with designated return types passed to the subsequent function

Extracting information from Timeless-time-picker utilizing form control

How can I rectify the issue in TypeScript where the error "not all code paths return a value" occurs?

Displaying the default value in a Material-UI v5 select component

Typescript implements strict enforcement of partial interfaces

Children components are not re-rendered by React

Unable to include a header in an Angular 2 HTTP request

Ways to enlarge image size without compromising the image resolution?

Examining the constructor condition

Loading a webpack bundled ngModule dynamically to handle a route efficiently

Filtering an array with radio buttons in Angular

failure of pipe during search for art gallery information