Kevin Powell - Community•4mo ago

Help me understanding how a type works

I'm currently trying to understand how Tiptap 's CommandManager works and especially how the commands are strongly typed. I have extracted the type declarations required to have the strong and dynamic typing of the commands handled by the CommandManager . I understand all but one of the types involved and it's the UnionToIntersection type (see attached typescript playground). While I see what this type does, I don't understand how it does it, if anyone can help me crack this code it would be great. Basically this type turns Unions of types like this one :

{
    doStuff: (arg1: string) => T;
    command: (type: "bob") => void;
} | {
    doStuff: (arg1: number, arg2: string) => T;
}

{
    doStuff: (arg1: string) => T;
    command: (type: "bob") => void;
} | {
    doStuff: (arg1: number, arg2: string) => T;
}

into Intersections of types like this one :

{
    doStuff: (arg1: string) => T;
    command: (type: "bob") => void;
} & { // notice this simbole changing ?
    doStuff: (arg1: number, arg2: string) => T;
}

{
    doStuff: (arg1: string) => T;
    command: (type: "bob") => void;
} & { // notice this simbole changing ?
    doStuff: (arg1: number, arg2: string) => T;
}

GitHub

GitHub - ueberdosis/tiptap at main

The headless rich text editor framework for web artisans. - GitHub - ueberdosis/tiptap at main

GitHub

tiptap/packages/core/src/CommandManager.ts at develop · ueberdosis/...

The headless rich text editor framework for web artisans. - ueberdosis/tiptap

1 Reply

Rägnar O'ockOP•4mo ago

Typescript Playground

TS Playground - An online editor for exploring TypeScript and JavaS...

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

Gaming

Programming

Help me understanding how a type works