Overload a method in typescript

Question

I have the following code :

document.querySelector('.edit').classList.add('hidden');

TypeScript tells me that the object returned by querySelector does not have classList as a method, with the following error :

Error TS2094: The property 'classList' does not exist on value of type 'Element'.

When I looked at what querySelector returns, I found that it returns Element. so I had to cast it to HTMLElement to be able to use classList like so :

(<HTMLElement>document.querySelector('.edit')).classList.add('hidden');

but like you might guess, at some point it starts to be counter productive, so I am asking you : Is there any sane way to get the classList from querySelector? Am I doing something wrong ? My guess is that I need to Overload the definition of querySelector.

Thank you

Answer 1

This is an error in lib.d.ts -- classList should be a member of Element, not HTMLElement, according to the IDL. You can edit lib.d.ts to reflect the change.

In general though, if a method returns e.g. an Animal but you know it's a Dog in this case, you will need to cast the result.