Extending a generic with a mixin pattern

[royal fiber]

Hi, I am developing a small browser editor for my application. This editor can have tools. These tools are really just event-emitters and event consumers. There are many tools that I forsee sharing some behavior so I thought a mix-in pattern would be appropriate for this. I am mostly refferring to the mix-in pattern in the Typescript documentation here.

My tools emit events, specified by a a generic type when creating them. Mixins may say "this tool can emit these events." I am having trouble getting my mixin to extend this generic. Here is a my module currently. I have commented where I am getting type-errors.

---

See attached, it got too long

---

If somebody has a different pattern that I could follow to also get this job done, let me know. For reference, I am using React. I have an editor context with the current tool and many components may reference this tool (like for drawing, display tool tips, forwarding events, etc).

Just to clarify.. the error I am getting is regarding the second argument to the .publish call in Tippable.ts

Diagnostics:
1. Argument of type 'ToolTipEvent' is not assignable to parameter of type 'TEventMap["tip"]'.
     'ToolTipEvent' is assignable to the constraint of type 'TEventMap["tip"]', but 'TEventMap["tip"]' could be instantiated with a different subtype of constraint 'ToolEvent'. [2345]

I do not have it yet, but it is important that I can check if something isTippable, so I can safely access .tip as well as .subscribe("tip", (e: ToolTipEvent) => ...);

[royal fiber]

How can I promote this? I am quite stuck.

[uncut thunder]

Making a example, e.g. on the TS Playground that reproduces the issue would help - especially a simpler one - this would be quite a bit of code for someone to dig through to try to solve the issue.

[royal fiber]

https://www.typescriptlang.org/play/?#code/KYDwDg9gTgLgBAQwEYGcZQQY3pgNglFOAIQOABUIJcAecgUQDdgA7GAWQTDlBlYBMilak1YcucALxxhuUW05gAfHACWAWzC5g6sUKq44AbwBQcOGCirGCPnFyq0rYFBQAuY2fNwA2gGk1FjgAa2AATwgAMxl5cTAAXQB+DwBlYBgaAApgDwZmBS5-eIBKKRVGCFV+JQBuLwBfKWN6uvNLCD5sYH4LAFckBxQACxoA3gEiUIjovLFFJWz8mA8-ABoLBDDcCAR+XNjFIuKPCqrjOHqTS5NQSFg4GDCwYBkDZG06A4lxlkFXkSWiiasi+yiaLGAAHc4JkAHTwhBQADm7kQLDCPhKZRIZFkn0BXFqJhu4GgOHwhDgAGEIJptHwqVBgLZgCktKoIbE1HSdHp-nIlp5zEzdhAWLgwg8ni9pAAiTC0rTpYCy1pwEX8MUSuAodkQjwQJAAK2A2DVCpYaCgvWw0Eyuoc+rghpN2FKRgeQ0csIdHJlOr1L0u10ez2pIr4bMdwFiREkXgAPtTFfTgIzmZHA7E6iZQy90yyo37QcCDCWAGRC3z0QLhjOsrNLIgEOD0HwAcjz7fi8Q89CuObwBCIBcz0dkpBQLx+f0nFAMNFHDejoJUpjaUA6pr4PUgHJgqJ8LF66iQLnWx9PLnimKamOJ5gA9I-nTAhi57BAkapMHB30yrmJW4yTgIdKSXIsIVkHgQD4X4hFUMAwHeYBMggwMJzId0LiA0l7jAogABFgEiBBelwGBoJnIg52gj1rmA-CKX0ahyEQrkNCVXQ2BYgUxCrDUtUlPMmllGBENVLxBPFYTEI8K0OSRc0xStG0YDtcSwHk9BFOwt9vU0ppDODYl9xcUjMBeNiwBLdcHjk-lrOzQCSTueBIl6FhsFUMUZEQ5CBmAGgvFmApuGo-lQVWEK5xguC-lkFD8TmQkTAWOdcjnd0vBEktpFCuI4ErJyCTAHMnxfcgAHlCKquBYTAfpBiGNQUBYTs4F6MB+BZHpIVUN9PReCFoRLC0rQQfcUCk9JeigIICL8pCULiiYcSnbkuL5PFVyrDdrBZOAAH1NO0qwWCRUTJK8cwkXSeywEyY4dR0i67O8dVZvmz1vROxC1XMa4PqneBNMyGxcF6HIXvOpFso+8xVGiTJ9JQWE-u4ABCSRpAhqH4YR8xUfRwzcYQSHgABhHnxkGq6qGCBoU1OAAEkeBYSJoEsuAAANZBKsQebgM9FIsJkpzYOB+v0oJrIC7REhuhHicagZHCGRJYUyMSJIvKFHPYpZwfJ-HiipwGlcuQG6muR8ACo7bMO3WybT1bEQXBDHU6g4HUTYeHUAancfVyQLMqALKsstBTs6TtTzM7FJcxjQelSLSqaAAlU1oH4GgFIu9YQSWJRiRE4uxAACQQX5tCgUZVvgkJwiidOUrBaRFjEXJo-bo5sVOfgc3tx24Gd6Dw8j2F+SITAa8+rBQYgHhXZr3dN34G0XjfYBVCgZ1IRYWFg9D+5J6wKPqGSsLG4S3ub-y++4jXQCgA

Sure, I guess I can copy it and remove most of the context to TS Playground

[royal fiber]

I think my problem is similar to that of HTML element events.. so I'll probably just look what Typescript does to define those (I think I' already close). I'll probably drop the mix-in idea for now since it's just adding complication. After I have a clearer idea on what I actually need I'll revisit some ways to remove repeated code that the mix-ins would otherwise alleviate.