I want to extend builtin HTML element classes (I know why you shouldn't and cant)
class MyCanvas extends HTMLCanvasElement
is obviously out of the question, but there's surely some hacky stuff we can do with .prototype
.
I can't figure it out though, at least not in such a way that TypeScript will agree with me.
The general idea I'm thinking of is;
1. Hide all of this in a separate file
2. Create an unexposed anonymous class who's purpose is to document.createElement("canvas")
and then impersonate it (I can't assign to this
and I can't get [anything here]() {}
, so I'm struggling with this step)
3. Assign the anonymous class to a const CanvasExtender
with as unknown as HTMLCanvasElement
4. extend the fake HTMLCanvasElement
that's technically a real canvas with a new class MyCanvas
5. export default MyCanvas
and have a class who's this
is my own custom properties and the actual properties of HTMLCanvasElement
---
I know this is awful but I'm doing this for a toy project where it doesn't matter, for a bit more context I'm using app.use("/*.js", ...)
to run tsc
in terminal from an express server who's sole purpose is transpiling TypeScript on browser refresh.
It's for fun, bad practice is allowed, hell is loose.1 Reply
...just remembered custom elements exist maybe there's something to that
yeah that was really easy actually.
you don't realise the solution until you ask someone else, where's my rubber duck...
for anyone who stumbles across this and wants to know how;