I attempted a small hack to explore how DOM ts files map different element names to their types.
My experiment involved trying to have a type MyType extend a different set of fields depending on the value of a string. Here is what I tried:
interface MessagesToContentMap {
"error": {message: string},
"success": {result: number}
}
My goal was to inherit this in a general message, which goes against the usual practice:
interface GenericMessage<KType extends keyof MessagesToContentMap> extends MessagesToContentMap[KType] {
type: KType
}
The idea behind this was that I hoped JavaScript would automatically infer the message type in if statements like this:
const msg: GenericMessage<any> = {};
if(msg.type === "error") {
// The type system should recognize this as {message: string, type: "error"}
}
Although this works with typeof, my specific code did not work as expected. It only hinted at the type property and not the other fields. However, it correctly suggested "error" and "success" as options for the type.
I also tried another approach, which functioned but did not align with the actual messages I would receive:
interface GenericMessage<KType extends keyof MessagesToContentMap> {
type: KType;
data: WorkersInternal.MessagesToContentMap[KType];
}
Even with this solution, an explicit cast was still needed. For example,
(testMessage as GenericMessage<"wrk">).data