CODEWITHSUNDEEP
typescript
Daedalus
Daedalus

Reputation: 265

Typescript Property 'style' does not exist on type 'HTMLElement'

Although my code works (below), typescript is throwing errors saying "Property 'style' does not exist on type 'HTMLElement'."

As you can see I am grabbing the element via jQuery & the element's ID. 

$(this.id).click(function () {
  this.style.display = 'none';
});

But this causes the following error:

`TS2339: Property 'style' does not exist on type 'HTMLElement'`.

I am not sure what would be the proper way of handling this ts error.

Would anyone let me know?

Thank you in advance.

more code, since it was requested:

`/**
* Class represents a flash message
*/
export class FlashMessage {    
flashMessageParentDivID:string;
iconID:string;
textID:string;
$: JQuery;

/**
 * 
 * @param {string} flashMessageParentDiv - the string of the div's ID.
 */ 
constructor (flashMessageParentDiv: string, $: JQuery) {
    this.flashMessageParentDivID = "#"+flashMessageParentDiv;
    this.iconID = "#flash-message-icon",
    this.textID = "#flash-message-text";
    this.$ = $;
}

/**
 * Displays the passed in message with the appropriate status.
 * @param {string} message - the message we want to flash.
 * @param {string} status: either 'error' or 'success'
 */
showWithMessage = function (message: string, status: string) {
    //@todo: maybe throw an error if status does not equal error or   success.
    this.clearAndCreateFlashMessageInnerds();
    this.$(this.flashMessageParentDivID).removeAttr("class");
    this.$(this.flashMessageParentDivID).addClass(status);

    this.$(this.iconID).removeAttr("class");
    this.$(this.iconID).addClass("k-icon k-i-" + status);

    this.$(this.textID).text(message);
    this.$(this.flashMessageParentDivID).show();   

    this.$(this.flashMessageParentDivID).click(function () {
        (<any>this).style.display = 'none';
    });
};

...`

typescript throwing errors

Upvotes: 12

Views: 44005

Answers (4)

doğukan
doğukan

Reputation: 27401

I've faced this error in forEach and NodeListOf<HTMLElement> saved my life

document.querySelectorAll('.my-element').forEach((p: HTMLElement, i:number, arr:NodeListOf<HTMLElement>) => {
 arr[arr.length - i].style.color = 'red';
})

Upvotes: 0

Akshay Vijay Jain
Akshay Vijay Jain

Reputation: 15945

Actually to take help from Type Safety of TypeScript, I think best solution is to create Custom Event Type because, we have only few use cases of Event, let me illustrate.

  1. event.target.value
  2. event.current.target.value
  3. event.className
  4. event.target.style
    and if any further use cases arises, it can be added to the list.
    We are creating Custom Event Type because otherwise, we have to deal with unnecessary compartmentalization of Event, HTMLButtonElement, HTMLSpanElement, all these don't serve very big purpose for our front-end code. so I created custom interface as below
interface IDom{
  value?:string;
  name?:string;
  className?:string;
  style?:any;
}
interface IEvent{
  target?:IDom,
  currentTarget?:IDom
}

const handleChange = (event:IEvent)=>{console.log(event?.target?.name)}

Note that all the properties have been kept optional because otherwise we unnecessarily get typescript errors, while defining event listeners if we don't pass some property, which doesn't serve a very great purpose!

Upvotes: 0

Manohar Gavit
Manohar Gavit

Reputation: 692

use this in your method 

(<HTMLElement>document.querySelector('#yourDomElmentID')).style.display = 'none';

test code

i test your code its compile successfully in my code.

Upvotes: 44

Daedalus
Daedalus

Reputation: 265

As Manohar Gavit suggested, I needed to typecast. But, his suggestion did not fix my problem. For some reason my jQuery definition file does not recognize HTMLElement as having the style property, but as you can see below... the definition file does accept any with that property.

`$(this.id).click(function () {
    (<any>this).style.display = 'none';
});`

Upvotes: 2

Related Questions