3 replies

I want to extend builtin HTML element classes (I know why you shouldn't and cant)

class MyCanvas extends HTMLCanvasElement

class MyCanvas extends HTMLCanvasElement

is obviously out of the question, but there's surely some hacky stuff we can do with

.prototype

.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")

document.createElement("canvas")

and then impersonate it (I can't assign to

this

this

and I can't

get [anything here]() {}

get [anything here]() {}

, so I'm struggling with this step)
3. Assign the anonymous class to a

const CanvasExtender

const CanvasExtender

with

as unknown as HTMLCanvasElement

as unknown as HTMLCanvasElement

4. extend the fake

HTMLCanvasElement

HTMLCanvasElement

that's technically a real canvas with a new class

MyCanvas

MyCanvas

export default MyCanvas

export default MyCanvas

and have a class who's

this

this

is my own custom properties and the actual properties of

HTMLCanvasElement

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", ...)

app.use("/*.js", ...)

to run

tsc

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.

I want to extend builtin HTML element classes (I know why you shouldn't and cant)

class MyCanvas extends HTMLCanvasElement

class MyCanvas extends HTMLCanvasElement

is obviously out of the question, but there's surely some hacky stuff we can do with

.prototype

.prototype

document.createElement("canvas")

document.createElement("canvas")

and then impersonate it (I can't assign to

this

this

and I can't

get [anything here]() {}

get [anything here]() {}

, so I'm struggling with this step)
3. Assign the anonymous class to a

const CanvasExtender

const CanvasExtender

with

as unknown as HTMLCanvasElement

as unknown as HTMLCanvasElement

4. extend the fake

HTMLCanvasElement

HTMLCanvasElement

that's technically a real canvas with a new class

MyCanvas

MyCanvas

export default MyCanvas

export default MyCanvas

and have a class who's

this

this

is my own custom properties and the actual properties of

HTMLCanvasElement

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", ...)

app.use("/*.js", ...)

to run

tsc

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.

I want to extend builtin HTML element classes (I know why you shouldn't and cant)

Similar Threads

I want to extend builtin HTML element classes (I know why you shouldn't and cant)

Similar Threads

Similar Threads

Similar Threads